@import "../mixins/text/h1.css";
@import "../mixins/text/h3.css";
@import "../mixins/text/h4.css";
@import "../mixins/text/h5.css";
@import "../mixins/grid/row.css";
@import "../mixins/grid/column.css";
@import "../mixins/utils/border-box.css";
@import "../mixins/buttons/base.css";

@define-mixin button-size-variants $base-name, $name, $color, $text-color {
  .$(name) {
    @mixin h4;
    @mixin btn-base $base-name, $color, $text-color;
    @mixin-content;

    &--xsmall {
      @mixin h5;
      @mixin btn-base $base-name, $color, $text-color;
      padding: 0.4em 1.75em;
      @mixin-content;
    }
    &--small {
      @mixin h5;
      @mixin btn-base $base-name, $color, $text-color;
      @mixin-content;
    }
    &--large {
      @mixin h3;
      @mixin btn-base $base-name, $color, $text-color;
      @mixin-content;
    }
  }

  .button-$(name)__icon {
    font-size: 1.25em;
    vertical-align: middle;
  }
}



@define-mixin button $name, $color, $secondary-color: $color, $text-color: #ffffff {
  /* This will get picked up by `postcss-simple-vars` later on
   * so `$secondary-color` can default to it */
  $color: $color;

  @mixin button-size-variants $name, button-$(name), $color, $text-color;
  @mixin button-size-variants $name, subdued-button-$(name), transparent, $secondary-color {
    border: 1px solid $secondary-color;
    color: $secondary-color;

    &:hover,
    &:focus {
      background-color: color($secondary-color alpha(5%));
    }

    &.disabled,
    &[disabled] {
      background-color: transparent;

      &:hover,
      &:focus {
        background-color: color($secondary-color alpha(2%));
      }
    }
  }
  @mixin button-size-variants $name, secondary-button-$(name), transparent, $secondary-color {
  	position: relative;
    border: none;
    color: $secondary-color;

    &:after {
      content: '';
      position: absolute;
      left: 0;
      bottom: .05em;
      right: 0;

      display: block;
      height: 2px;

      opacity: 0;

      transform: translateY(1em) scaleY(6);

      transition:
        opacity .2s ease,
        transform .3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    }

    &:hover,
    &:focus {
      &:after {
        opacity: 1;
        background-color: currentColor;
        transform: scaleY(1);
      }
    }

    &.disabled,
    &[disabled] {
      background-color: transparent;

      &:after {
        transform: none;
      }

      &:hover,
      &:focus {
        background-color: transparent;
      }
    }
  }
}


@mixin button clouds, $clouds-content, $clouds-content, $base-text-color;
@mixin button caribbean, $caribbean;
@mixin button jaffa, $jaffa;
@mixin button pampas, $pampas, $base-text-color, $base-text-color;
@mixin button thunder, $thunder;
@mixin button ruby, transparent, $ruby, $ruby;
@mixin button facebook, $facebook-blue;
@mixin button twitter, $twitter-blue;
@mixin button linkedin, $linkedin-blue;
@mixin button google-plus, $google-red;
@mixin button google, $google-red;
@mixin button gitlab, $gitlab-orange;
@mixin button github, $thunder;