text: import { IoIosArrowDropdown } from 'react-icons/io';
  import styled from 'styled-components';
  
  export const Container = styled.div`
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 1rem;
    padding: 1rem 0;
  
    @media ${(props) => props.theme.breakpoints.md} {
      grid-column-gap: 0;
    }
  `;
  
  export const HomeTitle = styled.div`
    grid-area: 1 / 1 / 2 / 3;
    display: flex;
    flex-direction: row;
    align-content: center;
  
    @media ${(props) => props.theme.breakpoints.md} {
      grid-area: 1 / 1 / 2 / 4;
    }
  `;
  
  export const Span = styled.span`
    font-size: 2rem;
  `;
  
  export const Navigation = styled.ul`
    grid-area: 1 / 3 / 2 / 4;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 2rem;
    align-items: center;
    text-align: center;
  
    @media ${(props) => props.theme.breakpoints.md} {
      display: none;
    }
  `;
  
  export const NavListItem = styled.li`
  `;
  
  export const NavLink = styled.a`
    font-size: 2rem;
    line-height: 32px;
    color: rgba(255, 255, 255, 0.75);
    transition: 0.4s ease;
  
    &:hover {
      color: #fff;
      opacity: 1;
      cursor: pointer;
    }
  
    @media ${(props) => props.theme.breakpoints.xsm} {
      font-size: 1.75rem;
    }
  `;
  
  export const SocialContainer = styled.div`
    grid-area: 1 / 4 / 2 / 5;
    display: flex;
    align-items: center;
  `;
  
  export const SocialIcons = styled.a`
    transition: 250ms ease;
    color: white;
    padding: 8px;
  
    &:hover {
      color: #24B2DB;
      transform: scale(1.2);
      cursor: pointer;
    }
  `;
  
  export const HamburgerContainer = styled.div`
    display: none;
    grid-area: 1 / 3 / 2 / 4;
    align-items: center;
    justify-content: right;
  
    @media ${(props) => props.theme.breakpoints.md} {
      display: flex;
    }
  `;
  
  export const HamburgerButton = styled.div`
    cursor: pointer;
    padding: 8px;
  `;
  
  /// DropDown Contact
  export const ContactDropDown = styled.button`
    border: none;
    display: flex;
    position: relative;
    background: none;
    font-size: 1.7rem;
  
    line-height: 32px;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: 0.3s ease;
  
    &:focus {
      outline: none;
    }
    &:hover {
      color: #fff;
    }
  
    @media ${(props) => props.theme.breakpoints.sm} {
      padding: 0.4rem 0;
    }
    @media ${(props) => props.theme.breakpoints.md} {
      padding: 0;
    }
  `;
  
  export const NavProductsIcon = styled(IoIosArrowDropdown)`
    margin-left: 8px;
    display: flex;
    align-self: center;
    transition: 0.3s ease;
    opacity: ${({ isOpen }) => (isOpen ? '1' : '.75')};
    transform: ${({ isOpen }) => (isOpen ? 'scaleY(-1)' : 'scaleY(1)')};
  
    &:hover {
      opacity: 1;
    }
  
    @media ${(props) => props.theme.breakpoints.sm} {
      margin: 2px 0 0 2px;
      width: 15px;
    }
  `;
  