.hamburger
{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: transparent;
    border: none;
    aspect-ratio: 1;
    border-radius: 50cqh;
}

.hamburger span
{
    /* height must be a percentage for anim to translate correctly since
    translation must be 50% of parent, but translate() is relative to self,
    so we make self ralative to parent to fix this */
    height: 7%;
    width: 100%;
    background: white;
    transition-property: transform, opacity;
    transform-origin: 50% 50%;
    opacity: 1;
    box-shadow: 0px 0px 5px black;
}

.hamburger.active span
{
    transform: scaleX(0);
    opacity: 0;

    &:first-child
    {
        transform:  translate(0, calc(50%*(100/7 - 1))) rotate(45deg);
        opacity: 1;
    }

    &:last-child
    {
        transform: translate(0px, calc(-50%*(100/7 - 1))) rotate(-45deg);
        opacity: 1;
    }
}