import ReakitButton from 'reakit/Button' ; import { Box } from '../primitives' ; import styled , { css , palette , space , theme , selector } from '../styled' ; import Button from '../Button' ; import Navigation from '../Navigation' ; import Divider from '../Divider' ; import Popover from '../Popover' ; import Icon from '../Icon/Icon' ; import StyledIcon from '../Icon/styled' ; import { LocalMenuProps } from './Menu' ; import { LocalMenuItemProps } from './MenuItem' ; export const MenuItem = styled ( ReakitButton ) < LocalMenuItemProps > `
  background-color: unset;
  cursor: pointer;
  display: block;
  font-weight: ${ theme ( 'fannypack.fontWeights.semibold' ) };
  padding: ${ space ( 1.5 ) }rem ${ space ( 4 ) }rem;
  text-align: left;
  width: 100%;

  a& {
    color: unset;
    fill: unset;
    text-decoration: unset;

    &:hover {
      color: unset;
      fill: unset;
    }
  }

  &[disabled] {
    cursor: not-allowed;
    opacity: 0.5;

    & {
      ${ theme ( 'fannypack.Menu.Item.disabled' ) };
    }
  }

  &:not(:disabled):focus {
    outline: unset;
    background-color: ${ palette ( 'white600' ) };

    & {
      ${ theme ( 'fannypack.Menu.Item.focus' ) };
    }
  }
  &:not(:disabled):hover {
    background-color: ${ palette ( 'white600' ) };

    & {
      ${ theme ( 'fannypack.Menu.Item.hover' ) };
    }
  }
  &:not(:disabled):focus:active,
  &:not(:disabled):hover:active {
    background-color: ${ palette ( 'white700' ) };
  }

  ${ props => props . isActive && css `
      background-color: ${ palette ( 'white700' ) };

      &&:hover,
      &&:focus {
        background-color: ${ palette ( 'white800' ) };
      }

      & {
        ${ theme ( 'fannypack.Menu.Item.active' ) };
      }
    ` }

  & ${ selector ( StyledIcon ) } {
    top: 0.15em;
  }

  & {
    ${ theme ( 'fannypack.Menu.Item.base' ) };
  }
` ; export const MenuButton = styled ( Button ) `
  & {
    ${ theme ( 'fannypack.Menu.Button.base' ) };
  }
` ; export const MenuDivider = styled ( Divider ) `
  margin: 0;
  width: 100%;

  & {
    ${ theme ( 'fannypack.Menu.Divider.base' ) };
  }
` ; export const MenuIcon = styled ( Icon ) `
  margin-right: ${ space ( 2 ) }rem;

  & {
    ${ theme ( 'fannypack.Menu.Item.icon' ) };
  }
` ; export const MenuGroup = styled ( Box ) `
  margin: ${ space ( 2 ) }rem 0;
  width: 100%;

  & {
    ${ theme ( 'fannypack.Menu.Group.base' ) };
  }
` ; export const MenuGroupTitle = styled ( Box ) `
  color: ${ palette ( 'text200' ) };
  font-size: ${ theme ( 'fannypack.fontSizes.100' ) }rem;
  font-weight: ${ theme ( 'fannypack.fontWeights.semibold' ) };
  letter-spacing: 1px;
  padding: ${ space ( 2 ) }rem ${ space ( 4 ) }rem;
  padding-top: ${ space ( 1 ) }rem;
  text-transform: uppercase;

  & {
    ${ theme ( 'fannypack.Menu.Group.title' ) };
  }
` ; export const MenuPopover = styled ( Popover ) `
  padding: 0px;
  width: 200px;

  & {
    ${ theme ( 'fannypack.Menu.Popover.base' ) };
  }
` ; export const Menu = styled ( Navigation ) < LocalMenuProps > `
  display: flex;
  align-items: flex-start;

  ${ props => props . isHorizontal ? css `
          flex-direction: row;

          & ${ selector ( MenuGroup ) } {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
          }

          & ${ selector ( MenuItem ) } {
            width: unset;
          }

          & {
            ${ theme ( 'fannypack.Menu.horizontal' ) };
          }
        ` : css `
          flex-direction: column;

          & {
            ${ theme ( 'fannypack.Menu.vertical' ) };
          }
        ` };

  & {
    ${ theme ( 'fannypack.Menu.base' ) };
  }
` ; export default Menu ;