import { css, palette, space } from '../../styled';
import { isInteractive } from '../../Button/styled';

export default {
  ActionButton: {
    base: css`
      height: ${space(2)}rem;
    `
  },
  Button: {
    base: css`
      border: 1px solid #bdbdbd;
      color: ${palette('text')};
      height: ${space(11)}rem;
      padding: 0.4em 1.8em 0.4em 0.6em;
      text-transform: unset;
      ${props =>
        isInteractive(props) &&
        css`
          &:hover {
            background-color: unset;
            color: unset;
          }
          &:focus {
            background-color: unset;
            color: unset;
            border: 1px solid ${palette('primary')};
            outline: unset;
            box-shadow: ${palette('primary')} 0px 0px 0px 1px !important;
          }
        `};
    `
  },
  LoadingSpinner: {
    base: css`
      top: 13px;
    `
  },
  Tag: {
    base: css`
      border-radius: 0px;
      background-color: ${palette('secondary')};
      & button {
        &:hover {
          background-color: ${palette('secondary700')};
        }
        &:focus,
        &:hover:focus {
          background-color: ${palette('secondary700')};
          box-shadow: inset ${palette('secondary')} 0px 0px 0px 2px;
          outline-color: ${palette('secondary')};
        }
      }
    `
  }
};