import { css , palette , space } from 'bumbag' ; export default { styles : { base : ( styleProps ) => css `
      border-radius: 0px;
      border: 2px solid ${ styleProps . palette === 'default' ? palette ( 'gray700' ) ( styleProps ) : 'transparent' };
      color: ${ styleProps . palette === 'default' ? palette ( 'gray700' ) ( styleProps ) : palette ( `${ styleProps . palette }Inverted` ) ( styleProps ) };
      min-height: 44px;
      hyphens: none;
      padding: 0 ${ space ( 4 ) ( styleProps ) }rem;
      font-size: 15px;
      text-transform: uppercase;
    ` , outlined : ( styleProps ) => css `
      background-color: ${ palette ( 'white' ) ( styleProps ) };
      border-width: 2px;

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

      &:hover:active {
        border-color: ${ palette ( `${ styleProps . palette }700` ) ( styleProps ) };
        background-color: ${ palette ( `${ styleProps . palette }700` ) ( styleProps ) };
      }
    ` , ghost : ( styleProps ) => css `
      border: 2px solid transparent;

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

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

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