@layer components {

    /*Hamburger Element*/
    .toggle-icon {
        --bar-offset: .4em;
        --bar-width: 3em;
        --bar-stroke: 2px;
        width: var(--bar-width);
        height: var(--bar-width);
        @apply relative;
    }

    .bar {
        @apply block bg-secondary absolute transition-all;
        content: '';
        height: var(--bar-stroke);
        width: var(--bar-width);
        top: calc(50% - var(--bar-stroke) / 2);
    }

    .bar:last-child {
        transform: translateY(calc(var(--bar-width) / 6));
    }

    .bar:first-child {
        transform: translateY(calc(var(--bar-width) / -6));
    }


    [open] .bar:not(:first-child):not(:last-child) {
        transform: scaleX(0%);
        opacity: 0;
    }

    [open] .bar {
        @apply bg-secondary
    }

    [open] .bar:first-child {
        width: var(--bar-width);
        /*transform-origin: center center;*/
        transform: translateY(0) rotate(45deg);
    }

    [open] .bar:last-child {
        width: var(--bar-width);
        /*transform-origin: center center;*/
        transform: translateY(0) rotate(-45deg);
    }

}
