@import "/UI/Core/Styles/Theme.scss";

RTVOverlay {
    width: 100%;
    height: 100%;
    pointer-events: none;

    .rtv-notice {
        align-self: center;
        margin-top: -250px;
        margin-left: 32px;
        width: 420px;
        min-height: 172px;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 8px;
        padding: 0;
        overflow: hidden;
        border-color: rgba(255, 255, 255, 0.16);
        background-color: rgba(0, 0, 0, 0.38);
    }

    .rtv-title {
        width: 100%;
        padding: 12px;
        background-color: rgba(0, 0, 0, 0.3);
        @include menu-eyebrow($color: rgba(255, 255, 255, 0.9), $size: 16px, $tracking: 1.8px);
    }

    .rtv-copy {
        width: 100%;
        padding: 0 12px;
        @include menu-copy($color: rgba(255, 255, 255, 0.8), $size: 12px, $tracking: 1px);
        //text-transform: uppercase;
        text-stroke-width: 4px;
		text-stroke-color: rgba( 0, 0, 0, 0.2 );
		text-shadow: 2 2px 3px rgba( 0, 0, 0, 0.6 );
    }

    .rtv-vote-stats {
        margin: 0 10px;
        padding: 8px 10px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background-color: rgba(0, 0, 0, 0.26);
    }

    .rtv-vote-stat {
        @include menu-copy($size: 12px, $color: rgba(255, 255, 255, 0.92), $tracking: 0.6px);
        text-transform: uppercase;
        text-stroke-width: 4px;
		text-stroke-color: rgba( 0, 0, 0, 0.2 );
		text-shadow: 2 2px 3px rgba( 0, 0, 0, 0.6 );

        &.yes {
            color: rgba($green, 0.98);
        }

        &.no {
            color: rgba($red, 0.98);
        }
    }

    .rtv-copy-smaller {
        width: 100%;
        padding: 0 10px;
        font-size: 8px;
        // @include menu-copy($color: rgba(255, 255, 255, 0.8), $size: 8px, $tracking: 1px);
        font-weight: $font-weight-regular;
        color: rgba(255, 255, 255, 0.8);
        text-stroke-width: 4px;
		text-stroke-color: rgba( 0, 0, 0, 0.2 );
		text-shadow: 2 2px 3px rgba( 0, 0, 0, 0.6 );
    }

    .rtv-key {
        color: $yellow;
        @include menu-copy($size: 12px, $color: rgba($yellow, 0.98), $tracking: 0.4px);
        font-weight: 700;
        text-stroke-width: 4px;
		text-stroke-color: rgba( 0, 0, 0, 0.2 );
		text-shadow: 2 2px 3px rgba( 0, 0, 0, 0.6 );
    }

    .rtv-command {
        color: $green;
        @include menu-copy($size: 12px, $color: rgba($green, 0.98), $tracking: 0.4px);
        font-weight: 700;
        text-stroke-width: 4px;
		text-stroke-color: rgba( 0, 0, 0, 0.2 );
		text-shadow: 2 2px 3px rgba( 0, 0, 0, 0.6 );
    }

    .rtv-timer {
        width: 100%;
        padding: 2px 14px 0 12px;
        @include menu-copy($size: 14px, $color: rgba(255, 255, 255, 0.78), $tracking: 0.5px);
        text-transform: uppercase;
    }

    .rtv-timeleft {
        width: 100%;
        height: 8px;
        background-color: rgba($green, 0.9);
        transition: width 0.08s linear;
    }

    .inline-space {
        margin-left: 4px;
        margin-right: 4px;
    }
}