@import "./../../common/modern-reset.css";
@import "./../../common/base.css";

h1,
h2,
button {
    margin-block: 1rem;
}

.button--burger {
    inline-size: 24px;
    block-size: 24px;
    position: relative;
    overflow: hidden;
    background-color: transparent;
    padding: 0;
    border: 0;

    .burger-bar {
        position: absolute;
        inset-inline: 0;
        block-size: 20%;
        background-color: currentColor;
        border-radius: 100px;
        transition: all 0.5s;
    }

    .burger-bar-top {
        inset-block-start: 0;
    }

    .burger-bar-middle {
        inset-block-start: 50%;
        /* transform: translateY(-50%); */
        translate: 0 -50%;
    }

    .burger-bar-bottom {
        inset-block-start: 100%;
        /* transform: translateY(-100%); */
        translate: 0 -100%;
    }

    &:hover {
        .burger-bar-top {
            inset-block-start: 50%;
            /* transform: translateY(-50%) rotate(45deg); */
            translate: 0 -50%;
            rotate: 45deg;
        }

        .burger-bar-middle {
            /* transform: translate(120%, -50%); */
            translate: 120% -50%;
        }

        .burger-bar-bottom {
            inset-block-start: 50%;
            /* transform: translateY(-50%) rotate(-45deg); */
            translate: 0 -50%;
            rotate: -45deg;
        }
    }
}

@keyframes spinner {
    0% {
        rotate: 0deg;
    }

    100% {
        rotate: 360deg;
    }
}

.loading-spinner {
    inline-size: 48px;
    block-size: 48px;
    color: palevioletred;

    svg {
        animation: spinner 1s infinite steps(15);
    }
}