$btn-border: 1px solid $button-default-border-color;


@mixin atom-button-bg($color, $hover-color, $selected-color, $text-color) {
  $active-shadow: inset 0 pxToRem(3px) pxToRem(5px) rgba(0, 0, 0, .125);
  color: $text-color;
  background-color: transparent;
  background-image: linear-gradient(lighten($color, 2%), $color);

  &:hover {
    color: $text-highlight-color;
    background-image: linear-gradient(lighten($hover-color, 2%), $hover-color);
  }

  &:active {
    background: darken($color, 4%);
    box-shadow: none;
  }

  &.selected {
    color: $text-selected-color;
    background: $selected-color;
  }

  &.selected:focus, &.selected:hover {
    background: lighten($selected-color, 2%);
  }

  &:focus {
    @include focus();
  }
}

@mixin atom-button-variant ($color) {
  $_text-color: contrast($color, white, hsl(0,0%,20%), 33% );

  @include atom-button-bg(
    $color,
    lighten($color, 3%),
    saturate(darken($color, 12%), 20%),
    $text-highlight-color
  );

  color: $_text-color;
  border-color: if($ui-lightness > 50%, transparent, $btn-border);

  &:hover, &:focus {
    color: $_text-color;
  }

  &:focus {
    border-color: transparent;
    background-clip: padding-box;
    box-shadow: inset 0 0 0 1px change_color($base-border-color, $alpha: 0.5), 0 0 0 1px $color;
  }
}

@mixin button-size($font-size, $line-height, $padding-vertical, $padding-horizontal, $border-width) {
  box-sizing: border-box;
  font-size: $font-size;
  line-height: $line-height;
  padding: $padding-vertical $padding-horizontal;
  height: calc(#{$font-size * $line-height} + #{2 * $padding-vertical} + #{2 * $border-width});
}

button {
  font-weight: $button-font-weight;
  font-family: $font-family;
  user-select: none;

  @include button-size($button-font-size, $button-line-height, $button-padding-vertical, $button-padding-horizontal,
                        $button-border-width);

  text-align: center;
  vertical-align: middle;
  cursor: pointer;

  border-radius: $button-border-radius;
  border: $btn-border;
  white-space: nowrap;

  @include atom-button-bg($button-default-bg-color,
                          $button-default-bg-hover-color,
                          $button-default-bg-selected-color,
                          $text-color);

  &.small {
    @include button-size($button-font-size-small, $button-line-height-small, $button-padding-vertical-small,
                          $button-padding-horizontal-small, $button-border-width-small);
  }

  &.inline {
    display: inline-block;
    box-sizing: border-box;
    font-size: $button-font-size-small;
    line-height: $line-height-base;
    vertical-align: baseline;
    height: unset;
    padding: $input-padding-vertical $input-padding-horizontal;

    &:after {
      content: "\200a";
      font-size: $input-font-size;
    }

    &.toolbar {
      min-width: calc(2 * #{$input-padding-horizontal} + 1.5em);
    }
  }

  &.primary {
    @include atom-button-variant($button-primary-bg-color);
  }

  &.success {
    @include atom-button-variant($button-success-bg-color);
  }

  &.info {
    @include atom-button-variant($button-info-bg-color);
  }

  &.warning {
    @include atom-button-variant($button-warning-bg-color);
  }

  &.danger {
    @include atom-button-variant($button-danger-bg-color);
  }

  &[disabled] {
    cursor: not-allowed;
    opacity: .65;
    box-shadow: none;
  }

  &.quiet.quiet.quiet {
    border-color: transparent;
    color: $text-color;
    text-shadow: none;

    transition: color, border-color 0.2s ease-in-out;

    background-image: none;

    &:hover, &:focus {
      border-color: $button-default-border-color;
      @include atom-button-bg($button-default-bg-color,
                              $button-default-bg-hover-color,
                              $button-default-bg-selected-color,
                              $text-color);
    }
  }

  &.microtool {
    font-weight: normal;
    border-color: transparent;
    color: $text-color;
    text-shadow: none;
  
    transition: color, background-color 0.2s ease-in-out;
  
    background-image: none;
    box-shadow: none;
  
    border-radius: $border-radius;

    width: 1.5em;
    height: 1.5em;
    text-align: center;
    padding: 0;
    vertical-align: middle;

    position: relative;

    > I {
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); 
    }
    
    &:focus {
      outline: 0;
      box-shadow: none;
    }

    &:hover, &:focus {
      box-shadow: none;
      background-color: $button-default-bg-color;
      color: $background-color;
    }

    &.primary:hover, &.primary:focus {
      background-color: $button-primary-bg-color;
    }

    &.success:hover, &.success:focus {
      background-color: $button-success-bg-color;
    }

    &.info:hover, &.info:focus {
      background-color: $button-info-bg-color;
    }

    &.warning:hover, &.warning:focus {
      background-color: $button-warning-bg-color;
    }

    &.danger:hover, &.danger:focus {
      background-color: $button-danger-bg-color;
    }
  }
}
