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

Spectating
{
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    width: 100%;

    z-index: 50;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    font-family: $main-font;
    color: white;
    line-height: 10;
    opacity: 1;
    pointer-events: none;

    label
    {
        font-size: 15px;
        text-shadow: 0px 4px 4px rgba( 0, 0, 0, 0.75 );
        text-transform: uppercase;
        letter-spacing: 0.8px;
    }

    .spectate-overlay
    {
        @include menu-surface-glass(
            $border-color: rgba( 255, 255, 255, 0 ),
            $background-color: rgba( 0, 0, 0, 0.25 ),
            $radius: 6px,
            $padding: 12px 18px,
            $backdrop: blur( 18px )
        );

        border-bottom-left-radius: 0px;
		border-bottom-right-radius: 0px;
        border-bottom: 0;
        width: auto;
        max-width: 90%;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        line-height: 1;
        text-shadow: 0px 2px 2px rgba( 0, 0, 0, 0.35 );
    }

    .spectate-line,
    .control-group
    {
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .spectate-line
    {
        gap: 8px;
    }

    .spectate-state
    {
        .spectate-value
        {
            font-size: 15px;
            opacity: 0.95;
        }
    }

    .spectate-controls
    {
        opacity: 0.9;
    }

    .control-group
    {
        gap: 4px;
    }

    .separator
    {
        opacity: 0.35;
    }

    .is-disabled
    {
        opacity: 0.35;
    }

    .spectate-afk
    {
        color: $warning-orange;
        opacity: 1;
    }
}