_buttons.scss

$include-button-css: true !default;

$button-color: $white !default;
$button-color-disabled: schema-color(1) !default;
$button-background: schema-color(3) !default;
$button-background-disabled: schema-color(2) !default;
$button-shadow-color: $miroschka !default;
$button-border-radius: $base-border-radius !default;
$button-padding: 0.5em 1em !default;
$button-sizes: (
  small: $font-size-small,
  medium: $base-font-size,
  large: $font-size-large
) !default;
$button-shadows: (
  normal: $paper-shadow-2,
  hover: $paper-shadow-3,
  active: none,
  disabled: none
) !default;

/**
 * Includes css for the general button styling
 */
@mixin button-base() {
  font-family: $base-font-family;
  -webkit-font-smoothing: antialiased;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  line-height: 1rem;
  user-select: none;
  border: 1px solid transparent;
  border-radius: $button-border-radius;
  padding: $button-padding;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  outline: none;
  @include appearance(none);
  @include transition(all 0.2s);
}

/**
 * Includes colors and shadows for buttons
 * @param color $background
 * @param color $color
 * @param color $disabled-background
 * @param color $disabled-color
 */
@mixin button-style($background, $color, $disabled-background: transparent, $disabled-color: transparent) {
  background-color: $background;
  color: $color;
  box-shadow: map-get($button-shadows, normal);

  &:hover,
  &.is-hovered {
    box-shadow: map-get($button-shadows, hover);
  }

  &:active,
  &.is-active {
    background-color: darken($background, 2%);
    box-shadow: map-get($button-shadows, active);
  }

  &:disabled,
  &.is-disabled {
    cursor: not-allowed;
    color: $disabled-color;
    background-color: $disabled-background;
    box-shadow: map-get($button-shadows, disabled);
  }
}

/**
 * Includes css to make a button small
 */
@mixin button-size-small() {
  font-size: map-get($button-sizes, small);
  line-height: map-get($button-sizes, small);
}

/**
 * Includes css to make a button medium
 */
@mixin button-size-medium() {
  font-size: map-get($button-sizes, medium);
  line-height: map-get($button-sizes, medium);
}

/**
 * Includes css to make a button large
 */
@mixin button-size-large() {
  font-size: map-get($button-sizes, large);
  line-height: map-get($button-sizes, large);
}

/**
 * Includes css for a button of type toggle
 */
@mixin button-type-toggle() {
  @include button-style($secondary-color, $asphalt, transparent, $ghost);

  &:active,
  &.is-active {
    box-shadow: $paper-shadow-1;
    color: $primary-color;
  }
}

/**
 * Includes css for a button of type flat
 */
@mixin button-type-flat() {
  @include button-style(transparent, $primary-color, $catkin, $ghost);
  box-shadow: none;

  &:hover,
  &.is-hovered {
    box-shadow: $paper-shadow-2;
    background-color: $catkin;
  }

  &:active,
  &.is-active {
    box-shadow: none;
    background-color: $catkin;
  }
}

@if $include-button-css {
  .button,
  button,
  input[type='reset'],
  input[type='button'],
  input[type='submit'] {
    @include button-base;
    @include button-style($button-background, $button-color, $button-background-disabled, $button-color-disabled);
    @include button-size-medium;

    &.mod-large {
      @include button-size-large;
    }

    &.mod-small {
      @include button-size-small;
    }

    &.mod-secondary {
      @include button-style($secondary-color, $asphalt, $silver, $ghost);
    }

    &.mod-toggle {
      @include button-type-toggle;
    }

    &.mod-flat {
      @include button-type-flat;
    }

    &.mod-collapse {
      padding: 0;
    }
  }

  .file-button {
    font-weight: normal;
    display: inline-block;
    vertical-align: middle;
    overflow: visible;

    input[type='file'] {
      display: none;
    }
  }
}