styling listbox

export const StyledListbox = styled(Listbox)`
  position: relative;
  min-width: 280px;
  ${props => props.theme.typography('primaryText')}

  [data-reach-listbox-button] {
    display: flex;
    align-items: center;
    height: 48px;
    width: 100%;
    padding: ${props => props.theme.spacing(0, 1.5, 0, 2)};
    border-color: ${props => props.theme.palette.gray[600]};
    color: ${props => props.theme.palette.common.black};
    cursor: pointer;
    outline: none;

    &[aria-expanded='true'] {
      border-color: ${props => props.theme.palette.gray[800]};
    }
  }

  [data-reach-listbox-arrow] {
    display: inline-flex;
    align-items: center;
    color: ${props => props.theme.palette.gray[800]};
    transition: ${({ theme: { transition } }) => {
      return `transform ${transition.duration.short}ms ${transition.easing.easeInOut}`;
    }};

    &[data-expanded] {
      transform: rotate3d(1, 0, 0, 180deg);
    }
  }

  [data-reach-listbox-popover] {
    width: 100%;
    padding: ${props => props.theme.spacing(1, 0)};
    border-color: transparent;
    background-color: ${props => props.theme.palette.common.white};
    box-shadow: ${props => props.theme.shadows[2]};
    z-index: 9999;
    cursor: pointer;

    &:focus-within {
      outline: none;
    }
  }

  [data-reach-listbox-option] {
    padding: ${props => props.theme.spacing(1)};
    color: ${props => props.theme.palette.common.black};

    &[data-current-nav] {
      background-color: ${props => props.theme.palette.gray[150]};
    }
  }
`;