.combat-sidebar { .encounter-controls.combat { justify-content: space-between; .encounter-control-fear-container { display: flex; position: relative; align-items: center; justify-content: center; color: black; .dice { height: 24px; } .encounter-control-fear { position: absolute; font-size: 16px; } .encounter-control-counter { position: absolute; right: -10px; color: var(--color-text-secondary); } } .control-buttons { width: min-content; } } .token-actions { align-self: stretch; display: flex; align-items: center; justify-content: center; gap: 16px; .action-tokens { display: flex; gap: 4px; .action-token { height: 24px; border: 1px solid; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 10px; padding: 8px; --button-size: 0; &.used { opacity: 0.5; } } } button { font-size: 22px; &.main { background: var(--button-hover-background-color); color: var(--button-hover-text-color); border-color: var(--button-hover-border-color); &:hover { filter: drop-shadow(0 0 3px var(--button-hover-text-color)); } } &.discrete:hover { background: inherit; } } .combatant-control { &:focus { outline: none; box-shadow: none; } &.requesting { filter: drop-shadow(0 0 3px gold); color: var(--button-hover-text-color); } } } h5 { margin: 0; text-align: center; } }