text: import styled from "styled-components"
  
  export const BurgerStyles = styled.button`
    position: fixed;
    top: 2.5rem;
    right: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 2rem;
    height: 2rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 101;
  
    @media (min-width: 768px) {
      display: none;
    }
  
    &:focus {
      outline: none;
    }
  
    div {
      width: 2rem;
      height: 2px;
      background: ${({ open }) => (open ? "#fff" : "#2b2b2b")};
      transition: all 0.3s;
      position: relative;
      transform-origin: 1px;
  
      &:first-child {
        transform: ${({ open }) => (open ? "rotate(45deg)" : "rotate(0)")};
      }
  
      &:nth-child(2) {
        opacity: ${({ open }) => (open ? 0 : 1)};
        transform: ${({ open }) => (open ? "translate(20px)" : "translate(0)")};
      }
  
      &:nth-child(3) {
        transform: ${({ open }) => (open ? "rotate(-45deg)" : "rotate(0)")};
      }
    }
  `
  