/*  COMPONENT: ANIMATED HAMBURGER ICON
//////////////////////////////////////////////////////////////////////////////*/
@layer components {
    .hamburger {
        --hamburger-layer-height: var(--icon-stroke-width);
        --hamburger-layer-spacing: 3px;

        position: relative;
        display: flex;
        justify-content: end;
        gap: var(--spacing-s);
    }
    .hamburger:focus {
    }
    .hamburger__text {
        line-height: 1.25;
    }
    .hamburger__box {
        width: var(--spacing-m);
        height: var(--spacing-m);
    }
    .hamburger__inner {
        top: 50%;
        display: block;
        margin-top: calc(var(--hamburger-layer-height) / -2);
    }
    .hamburger__inner,
    .hamburger__inner::before,
    .hamburger__inner::after {
        position: absolute;
        width: var(--spacing-m);
        height: var(--hamburger-layer-height);
        background-color: var(--color-black);
        transition-timing-function: ease;
        transition-duration: 0.15s;
        transition-property: transform;
    }
    .hamburger__inner::before,
    .hamburger__inner::after {
        display: block;
        content: "";
    }
    .hamburger__inner::before {
        top: calc((var(--hamburger-layer-spacing) + var(--hamburger-layer-height)) * -1);
    }
    .hamburger__inner::after {
        bottom: calc((var(--hamburger-layer-spacing) + var(--hamburger-layer-height)) * -1);
    }
    .hamburger[aria-expanded="false"] .hamburger__inner {
        transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        transition-duration: 0.1s;
    }
    .hamburger[aria-expanded="false"] .hamburger__inner::before {
        transition: top 0.1s 0.14s ease, opacity 0.1s ease;
    }
    .hamburger[aria-expanded="false"] .hamburger__inner::after {
        transition: bottom 0.1s 0.14s ease, transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    .hamburger[aria-expanded="true"] {
    }
    .hamburger[aria-expanded="true"] .hamburger__inner {
        transition-delay: 0.14s;
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transform: rotate(45deg);
    }
    .hamburger[aria-expanded="true"] .hamburger__inner::before {
        top: 0;
        transition: top 0.1s ease, opacity 0.1s 0.14s ease;
        opacity: 0;
    }
    .hamburger[aria-expanded="true"] .hamburger__inner::after {
        bottom: 0;
        transition: bottom 0.1s ease, transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
        transform: rotate(-90deg);
    }
    .hamburger[aria-expanded="true"] .hamburger__inner,
    .hamburger[aria-expanded="true"] .hamburger__inner::before,
    .hamburger[aria-expanded="true"] .hamburger__inner::after {
        background-color: var(--color-mbz-grey-500);
    }
}