@import "_theme.scss";

HudTopbar {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    font-family: $font-display;
    color: $ink;

    .chip {
        position: absolute;
        top: 44px;
        flex-direction: row;
        align-items: center;
        gap: 16px;
        border: 6px solid $ink;
        border-radius: 24px;
        box-shadow: 7px 7px 0 $ink;
        padding: 14px 26px;
        transition: opacity 0.2s ease-in;
    }

        .chip:outro {
            opacity: 0;
        }

        .chip.lives {
            left: 48px;
            background-color: $white;
            animation-name: topbar-left;
            animation-duration: 0.5s;
            animation-timing-function: bounce-out;
            animation-delay: 0.05s;
            animation-fill-mode: backwards;
        }

        .chip.level {
            right: 48px;
            background-color: $gold;
            animation-name: topbar-right;
            animation-duration: 0.5s;
            animation-timing-function: bounce-out;
            animation-delay: 0.05s;
            animation-fill-mode: backwards;
        }

        .chip.mode {
            left: 48px;
            top: 138px;
            padding: 10px 24px;
            animation-name: topbar-left;
            animation-duration: 0.5s;
            animation-timing-function: bounce-out;
            animation-delay: 0.12s;
            animation-fill-mode: backwards;
        }

            .chip.mode.classic {
                background-color: $blue;
            }

            .chip.mode.arcade {
                background-color: $purple;
            }

            .chip.mode.weekly {
                background-color: $orange;
            }

            .chip.mode .chip-label {
                font-size: 24px;
                letter-spacing: 2px;
                color: $white;
            }

        .chip.best {
            right: 48px;
            top: 158px;
            background-color: $white;
            padding: 10px 24px;
            animation-name: topbar-right;
            animation-duration: 0.5s;
            animation-timing-function: bounce-out;
            animation-delay: 0.12s;
            animation-fill-mode: backwards;
        }

            .chip.best .chip-label {
                font-size: 22px;
                letter-spacing: 2px;
                color: $gold-deep;
            }

    .chip-label {
        font-family: $font-display;
        font-weight: 800;
        font-size: 30px;
        color: $ink;
    }

    .level-num {
        font-family: $font-display;
        font-weight: 800;
        font-size: 44px;
        color: $ink;
    }

    .best-num {
        font-family: $font-display;
        font-weight: 800;
        font-size: 34px;
        color: $ink;
    }

    .dots {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .dot {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 4px solid $ink;
    }

        .dot.on {
            background-color: $red;
            box-shadow: 3px 3px 0 $ink;
        }

        .dot.off {
            background-color: $sand;
            border-color: $sand-deep;
        }

    .scorebox {
        position: absolute;
        top: 34px;
        left: 50%;
        transform: translateX( -50% );
        flex-direction: column;
        align-items: center;
        transform-origin: top center;
        transition: transform 0.12s ease-out, opacity 0.2s ease-in;
        animation-name: topbar-drop;
        animation-duration: 0.5s;
        animation-timing-function: bounce-out;
        animation-delay: 0.12s;
        animation-fill-mode: backwards;
    }

        .scorebox:outro {
            opacity: 0;
        }

    .score-label {
        font-family: $font-body;
        font-weight: 800;
        letter-spacing: 5px;
        font-size: 20px;
        color: rgba( $ink, 0.75 );
    }

    .score-value {
        font-family: $font-display;
        font-weight: 800;
        font-size: 82px;
        color: $white;
        text-stroke: 18px $ink;
    }

    .scorebox.flash {
        transform: translateX( -50% ) scale( 1.14 );
    }

        .scorebox.flash .score-value {
            color: $highlight;
        }
}

@keyframes topbar-left {
    0% {
        transform: translateX( -180px );
        opacity: 0;
    }
    100% {
        transform: translateX( 0px );
        opacity: 1;
    }
}

@keyframes topbar-right {
    0% {
        transform: translateX( 180px );
        opacity: 0;
    }
    100% {
        transform: translateX( 0px );
        opacity: 1;
    }
}

@keyframes topbar-drop {
    0% {
        transform: translateX( -50% ) translateY( -60px );
        opacity: 0;
    }
    100% {
        transform: translateX( -50% ) translateY( 0px );
        opacity: 1;
    }
}