import { css, palette } from 'bumbag';

export default {
  styles: {
    base: (props) => css`
      background-color: ${palette('primary800')(props)};
    `,
  },
  Level: {
    Title: {
      styles: {
        base: (styleProps) => css`
          color: ${palette('white')(styleProps)};
        `,
      },
    },
  },
  Item: {
    styles: {
      base: (props) => css`
        && {
          color: ${palette('white')(props)} !important;
          align-items: center;
          border-color: ${palette('primary')(props)};
          color: #e7e5e1;
          display: flex;
          height: 40px;
          text-transform: uppercase;
          text-decoration: none;

          ${props.isActive &&
          css`
            background-color: ${palette('primary700')(props)};
            color: ${palette('white')(props)};
          `};

          &:hover {
            background-color: ${palette('primary700')(props)};
            color: ${palette('white')(props)};
          }

          &:focus {
            outline: none;
            background-color: ${palette('primary700')(props)};
          }
        }
      `,
    },
  },
};