import { darken } from 'polished' ; import _defaultPalette from '../../themes/default/palette' ; import { palette , css , space } from '../../styled' ; import { isInteractive } from '../../Button/styled' ; const defaultPalette = _defaultPalette ( { } ) ; export default { base : css `
    border-radius: 0px;
    border: 2px solid ${ ( props ) => ( props . palette === 'default' ? palette ( 'gray700' ) : 'transparent' ) };
    color: ${ ( props ) => ( props . palette === 'default' ? palette ( 'gray700' ) : palette ( `${ props . palette }Inverted` ) ) };
    min-height: 44px;
    padding: 0 ${ space ( 4 ) }rem;
    font-size: 15px;
    text-transform: uppercase;
    ${ props => isInteractive ( props ) && css `
        &:focus {
          outline: 2px solid ${ ( props ) => ( props . palette === 'default' ? palette ( 'gray800' ) : palette ( ) ) };
          outline-offset: 0;
          box-shadow: none;
          background-color: ${ palette ( ) };
        }
      ` };
  ` , outlined : css `
    background-color: white;
    border-width: 2px;
  ` , ghost : css `
    border: 2px solid transparent;

    &:hover {
      color: ${ ( props ) => palette ( `${ props . palette }Inverted` ) ( props ) };
      fill: ${ ( props ) => palette ( `${ props . palette }Inverted` ) ( props ) };
      background-color: ${ palette ( ) };
    }

    &:hover:active {
      color: ${ ( props ) => palette ( `${ props . palette }Inverted` ) ( props ) };
      fill: ${ ( props ) => palette ( `${ props . palette }Inverted` ) ( props ) };
      background-color: ${ palette ( ) };
    }

    &:focus {
      border: 2px solid white;
      background-color: unset;
      color: ${ ( props ) => ( props . palette === 'default' ? palette ( 'text' ) : palette ( props . palette ) ) };
    }
  ` , interactive : css `
    &:focus {
      border: 2px solid white;
      background-color: ${ ( props ) => props . palette === 'default' ? palette ( 'gray800' ) : palette ( `${ props . palette }600` ) };
      color: ${ ( props ) => ( props . palette === 'default' ? 'white' : palette ( `${ props . palette }Inverted` ) ) };
    }
    ${ ( props ) => props . palette === 'default' && css `
        &:hover {
          background-color: ${ palette ( 'gray700' ) };
          color: white;
        }
        &:hover:active {
          background-color: ${ palette ( 'gray800' ) };
        }
      ` };
  ` , link : css `
    border: 2px solid transparent;
    background: unset;
  ` , sizes : { small : css `
      height: ${ space ( 8 ) }rem;
      font-size: 15px;
      padding: 0 ${ space ( 4 ) }rem;
    ` , medium : css `
      font-size: 18px;
    ` } } ;