@import "/UI/Core/Styles/Theme.scss";
MapVoteOverlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color: rgba( 255, 255, 255, 0.9 );
    pointer-events: none;
    @include menu-font-body();

    .map-vote-overlay {
        pointer-events: none;
    }

    .map-vote-overlay:not(.is-minimized) {
        pointer-events: all;
    }

    .map-vote-shell {
        width: 100%;
        height: 100%;
        min-height: 0;
        padding: 16px;
        pointer-events: none;
        justify-content: center;
        align-items: center;
    }

    .map-vote-panel {
        @include menu-surface-glass();
        width: 100%;
        max-height: 100%;
        min-height: 0;
        pointer-events: all;
        gap: 10px;
        border-color: rgba( 255, 255, 255, 0.2 );
        background-color:rgba(59, 53, 53, 0.6);
    }

    .map-vote-topbar {
        width: 100%;
        align-items: center;
        gap: 10px;
        padding-bottom: 2px;
    }

    .map-vote-title-wrap {
        min-width: 0;
        flex-grow: 1;
        gap: 1px;
    }

    .map-vote-title {
        color: rgba( 255, 255, 255, 0.96 );
        text-shadow: none;
        font-family: "Dinish", "Dinish-Regular", "Dinish-Bold";
        font-size: 26px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1.4px;
    }

    .map-vote-subtitle {
        @include menu-copy( $size: 11px, $color: rgba( 255, 255, 255, 0.68 ), $tracking: 1.2px );
        text-transform: uppercase;
    }

    .map-vote-timer-block {
        min-width: 120px;
        align-items: flex-end;
        gap: 1px;
    }

    .map-vote-timer-label {
        @include menu-copy( $size: 11px, $color: rgba( 255, 255, 255, 0.68 ), $tracking: 1.2px );
        text-transform: uppercase;
    }

    .map-vote-timer-value {
        color: rgba( 255, 255, 255, 0.96 );
        text-shadow: none;
        font-family: "Dinish", "Dinish-Regular", "Dinish-Bold";
        font-size: 26px;
        font-weight: 600;
        letter-spacing: 0.8px;
    }

    UIButton .ui-button.map-vote-minimize-action {
        min-width: 120px;
        justify-content: center;
        text-transform: uppercase;
        letter-spacing: 1.2px;
        border-color: rgba( 255, 255, 255, 0.35 );
    }

    .map-vote-status-row {
        width: 100%;
        gap: 16px;
        background-color: rgba( 0, 0, 0, 0.25 );
        padding: 6px 14px;
        align-items: center;
    }

    .map-vote-status {
        color: rgba( 255, 255, 255, 0.94 );
        text-shadow: none;
        font-family: "Dinish", "Dinish-Regular", "Dinish-Bold";
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.6px;
        font-style: italic;
    }

    .map-vote-status-detail {
        @include menu-copy( $size: 10px, $color: rgba( 255, 255, 255, 0.6 ), $tracking: 1.6px );
        text-transform: uppercase;
    }

    .map-vote-grid {
        width: 100%;
        min-height: 0;
        flex-grow: 1;
        gap: 10px;
        align-content: flex-start;
        justify-content: center;
        overflow-x: hidden;
        overflow-y: scroll;
        padding-right: 4px;
    }

    .map-vote-card {
        @include menu-surface-alt();
        width: 290px;
        height: 388px;
        max-height: 388px;
        padding: 0;
        flex-direction: column;
        overflow: hidden;
        border-color: rgba( 255, 255, 255, 0.18 );
        transition: transform 0.12s ease, border-color 0.12s ease, background-color 0.12s ease, opacity 0.16s ease;
        cursor: pointer;
    }

    .map-vote-card-image {
        width: 290px;
        height: 290px;
        background-color: rgba( 255, 255, 255, 0.04 );
        background-size: 100% 100%;
        background-position: center;
        border-bottom: 1px solid rgba( 255, 255, 255, 0.16 );
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        padding: 8px;
        position: relative;

        .map-vote-card-tag-row {
            position: absolute;
            bottom: 8px;
            left: 8px;
            width: auto;
            overflow: visible;
        }
    }

    .map-vote-card-badge {
        @include menu-copy( $size: 10px, $color: rgba( 255, 255, 255, 0.95 ), $tracking: 1.2px );
        border-radius: 999px;
        border: 1px solid rgba( 255, 255, 255, 0.26 );
        background-color: rgba( 0, 0, 0, 0.46 );
        padding: 2px 8px;
        text-transform: uppercase;
    }

    .map-vote-card-badge--leader {
        border-color: rgba( $traitor-red, 0.68 );
        background-color: rgba( $traitor-red, 0.18 );
    }

    .map-vote-card-badge--winner {
        border-color: rgba( $counter-terror-color, 0.72 );
        background-color: rgba( $counter-terror-color, 0.18 );
    }

    .map-vote-card-badge--loser {
        border-color: rgba( 255, 255, 255, 0.16 );
        background-color: rgba( 0, 0, 0, 0.35 );
    }

    .map-vote-card-body {
        width: 100%;
        height: 108px;
        max-height: 108px;
        padding: 10px 8px;
        flex-direction: column;
        gap: 3px;
        overflow: hidden;
        background-color: rgba( 0, 0, 0, 0.45 );
    }

    .map-vote-card-title {
        color: rgba( 255, 255, 255, 0.94 );
        text-shadow: none;
        font-family: "Dinish", "Dinish-Regular", "Dinish-Bold";
        font-size: 13px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.9px;
    }

    .map-vote-card-org {
        @include menu-copy( $size: 12px, $color: rgba( 255, 255, 255, 0.74 ), $tracking: 0.4px );
    }

    .map-vote-card-meta-row {
        width: 100%;
        flex-wrap: wrap;
        gap: 4px;
        overflow: visible;
    }

    .map-vote-card-tag-row {
        width: 100%;
        flex-wrap: wrap;
        gap: 4px;
        overflow: hidden;
    }

    .map-vote-card-meta,
    .map-vote-card-tag {
        @include menu-copy( $size: 9px, $color: rgba( 255, 255, 255, 0.86 ), $tracking: 0.7px );
        border-radius: 999px;
        border: 1px solid rgba( 255, 255, 255, 0.18 );
        background-color: rgba( 0, 0, 0, 0.28 );
        padding: 1px 6px;
        text-transform: uppercase;
        max-width: 118px;
        text-overflow: ellipsis;
        white-space: nowrap;
        align-items: center;
        gap: 4px;
    }

    .map-vote-card-meta--players {
        max-width: 132px;
        margin-left: -4px;
    }

    .map-vote-card-meta-icon {
        font-family: "Material Icons";
        font-size: 11px;
        font-weight: 400;
        letter-spacing: 0;
        text-transform: lowercase;
        color: rgba( 255, 255, 255, 0.82 );
    }

    .map-vote-card-meta-text {
        @include menu-copy( $size: 9px, $color: rgba( 255, 255, 255, 0.86 ), $tracking: 0.7px );
        text-transform: uppercase;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .map-vote-card-tag {
        border-color: rgba( $counter-terror-color, 0.38 );
        background-color: rgba( $counter-terror-color, 0.25 );
        position: relative;
        padding: 3px 4px;
        align-items: center;
        justify-content: center;
        max-width: 28px;
        overflow: visible;

        .map-vote-card-tag-icon {
            font-family: "Material Icons";
            font-size: 16px;
            font-weight: 400;
            letter-spacing: 0;
            text-transform: lowercase;
            color: rgba( 255, 214, 110, 0.95 );
            text-shadow: none;
        }

        .map-vote-card-tag-tooltip {
            position: absolute;
            bottom: 100%;
            left: 0;
            margin-bottom: 6px;
            padding: 1px 2px 1px 4px;
            background-color: rgba( 8, 8, 10, 0.94 );
            border: 0.5px solid;
            border-color: rgba( 255, 255, 255, 0.14 );
            border-radius: 2px;
            white-space: nowrap;
            align-items: center;
            justify-content: center;
            font-family: "Dinish", "Dinish-Regular", "Dinish-Bold";
            font-size: 9px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: rgba( 255, 255, 255, 0.92 );
            text-shadow: none;
            opacity: 0;
            transition: opacity 0.12s ease;
        }

        &:hover .map-vote-card-tag-tooltip {
            opacity: 1;
        }
    }

    .map-vote-card-vote-row {
        width: 100%;
        margin-top: auto;
        align-items: center;
        gap: 8px;
    }

    .map-vote-card-vote-count {
        @include menu-copy( $size: 12px, $color: rgba( 255, 255, 255, 0.84 ), $tracking: 0.6px );
        text-transform: uppercase;
        flex-shrink: 0;
    }

    .map-vote-card-avatars {
        margin-left: auto;
        align-items: center;
        gap: 4px;
        overflow: hidden;
    }

    .map-vote-card-avatars .avatar {
        width: 24px;
        height: 24px;
        border-radius: 999px;
        border: 1px solid rgba( 255, 255, 255, 0.45 );
    }

    .map-vote-card-avatar-overflow {
        @include menu-copy( $size: 11px, $color: rgba( 255, 255, 255, 0.78 ), $tracking: 0.4px );
        margin-left: 3px;
    }

    .map-vote-card:hover:not(.is-locked) {
        transform: translateY( -1px );
        border-color: rgba( 255, 255, 255, 0.28 );
        background-color: rgba( 255, 255, 255, 0.06 );
    }

    .map-vote-card.is-clicking {
        transform: scale( 0.985 );
    }

    .map-vote-card.is-leading:not(.is-winner) {
        border-color: rgba( $traitor-red, 0.62 );
    }

    .map-vote-card.is-local-vote {
        border-color: rgba( $counter-terror-color, 0.54 );
    }

    .map-vote-card.is-winner {
        border-color: rgba( $counter-terror-color, 0.72 );
        background-color: rgba( $counter-terror-color, 0.1 );
    }

    .map-vote-card.is-loser {
        opacity: 0.58;
    }

    .map-vote-card.is-vote-animating {
        animation: map-vote-card-pulse 0.45s ease-out;
    }

    .map-vote-card.is-locked {
        cursor: default;
    }

    @keyframes map-vote-card-pulse {
        0% {
            transform: scale( 0.985 );
        }

        55% {
            transform: scale( 1.01 );
        }

        100% {
            transform: scale( 1 );
        }
    }

    .map-vote-footer {
        width: 100%;
        gap: 10px;
        padding-top: 2px;
        align-items: center;
    }

    .map-vote-note {
        @include menu-copy( $size: 11px, $color: rgba( 255, 255, 255, 0.58 ), $tracking: 0.4px );
    }

    UIButton .ui-button.map-vote-leave-action {
        min-width: 120px;
        align-items: center;
        gap: 6px;
    }

    UIButton .ui-button.map-vote-error {
        pointer-events: none;
        justify-content: center;
    }

    .map-vote-minimized {
        @include menu-surface-glass(
            $border-color: rgba( 255, 255, 255, 0 ),
            $background-color: rgba( 0, 0, 0, 0.55 ),
            $radius: 6px,
            $padding: 6px 14px,
            $backdrop: blur( 18px )
        );

        position: absolute;
        top: 0px;
        left: 50%;
        transform: translateX( -50% );
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border-top: 0;
        background-color: $widget-color;
        backdrop-filter: $widget-backdrop-filter;
        box-shadow: 0px 16px 48px rgba( 0, 0, 0, 0.35 );
        align-items: center;
        gap: 10px;
        min-width: 240px;
        justify-content: center;
        pointer-events: none;

        .key-hint {
            background-color: rgba( 255, 255, 255, 0.05 );
            border: 1px solid rgba( 255, 255, 255, 0.12 );
            border-radius: 4px;
            padding: 2px 8px;
            min-width: 24px;
            text-align: center;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.6px;
            text-transform: uppercase;
            color: rgba( 255, 255, 255, 0.92 );
            text-shadow: none;
        }
    }

    .map-vote-minimized-title {
        @include menu-copy( $size: 14px, $color: rgba( 255, 255, 255, 0.92 ), $tracking: 0.6px );
        text-transform: uppercase;
        text-shadow: 0px 2px 2px rgba( 0, 0, 0, 0.75 );
    }

    .map-vote-minimized-timer {
        @include menu-copy( $size: 14px, $color: rgba( 255, 255, 255, 0.88 ), $tracking: 0.6px );
        font-family: "Dinish", "Dinish-Regular", "Dinish-Bold";
        text-shadow: 0px 2px 2px rgba( 0, 0, 0, 0.75 );
    }

    .map-vote-overlay.is-minimized .map-vote-shell {
        display: none;
    }
}