#ingame_HUD_TutorialHints {
    position: absolute;
    @include S(left, 10px);
    @include S(bottom, 10px);

    @include StyleBelowWidth(1430px) {
        @include S(bottom, 50px);
    }

    display: flex;
    flex-direction: column;
    background: rgba(50, 60, 70, 0);

    transition: all 0.2s ease-in-out;
    pointer-events: all;

    transition-property: background-color, transform, bottom, left;

    @include S(padding, 5px);
    video {
        transition: all 0.2s ease-in-out;
        transition-property: opacity, width;
        @include S(width, 0px);
        opacity: 0;
        z-index: 10;
        position: relative;
    }

    .header {
        color: #333438;
        display: grid;
        align-items: center;
        @include S(grid-gap, 2px);
        grid-template-columns: 1fr;
        @include S(margin-bottom, 3px);
        z-index: 11;
        position: relative;

        > span {
            @include DarkThemeInvert;

            display: flex;
            @include SuperSmallText;
            justify-content: flex-start;
            align-items: center;
            &::before {
                @include S(margin-right, 4px);
                content: " ";
                @include S(width, 12px);
                @include S(height, 12px);
                display: inline-block;
                & {
                    /* @load-async */
                    background: uiResource("icons/help.png") center center / 95% no-repeat;
                }
            }
        }

        button.toggleHint {
            @include PlainText;
            @include IncreasedClickArea(0px);
        }
    }

    button.toggleHint {
        .hide {
            display: none;
        }
    }

    &.enlarged {
        background: $ingameHudBg;
        left: 50%;
        bottom: 50%;
        transform: translate(-50%, 50%);

        &::before {
            pointer-events: all;
            content: " ";
            position: fixed;
            top: -1000px;
            left: -1000px;
            right: -1000px;
            bottom: -1000px;
            z-index: 0;

            background: rgba($ingameHudBg, 0.3);
        }

        .header {
            grid-template-columns: 1fr auto;
            > span {
                display: none;
            }
            button.toggleHint {
                grid-column: 2 / 3;
            }
        }

        video {
            @include InlineAnimation(0.2s ease-in-out) {
                0% {
                    opacity: 0;
                    @include S(width, 0px);
                }
            }

            opacity: 1;
            @include S(width, 500px);
        }
        button.toggleHint {
            .hide {
                display: block;
            }
            .show {
                display: none;
            }
        }
    }
}