.button {
    cursor: pointer;
    width: var(--static-space-40);
    height: var(--static-space-40);
    min-width: var(--static-space-40);
    min-height: var(--static-space-40);
}

.line {
    background-color: var(--neutral-on-background-strong);
    height: 1px;
    width: var(--static-space-24);
    transition: transform 0.3s ease;
    position: absolute;
    left: 50%;
    top: 50%;

    &:first-child {
        transform: translateX(-50%) translateY(calc(-1 * var(--static-space-4)));
    }
    
    &:last-child {
        transform: translateX(-50%) translateY(var(--static-space-4));
    }    
}

.active:first-child {
    transform: translateX(-50%) translateY(0) rotate(45deg);
}

.active:last-child {
    transform: translateX(-50%) translateY(0) rotate(-45deg);
}