// scss-docs-start btn-variables
// btn-size
$btn-size-small: 30px !default;
$btn-size-middle: 36px !default;
$btn-size-large: 46px !default;
$btn-size-super: 46px !default;

// btn-width
$btn-length-small: 80px !default;
$btn-length-middle: 120px !default;

// btn font-size
$btn-font-size-small: 13px !default;
$btn-font-size-middle: 14px !default;
$btn-font-size-large: 16px !default;
$btn-font-size-super: 16px !default;

// scss-docs-start btn-themes
$btn-colors: (
  'brand': $brand
) !default;

$btn-theme-colors: map-merge(
  $map1: $auxiliary-colors,
  $map2: $btn-colors
) !default;
// scss-docs-end btn-themes

// btn-size map
$btn-sizes: (
  'small': $btn-size-small,
  'middle': $btn-size-middle,
  'large': $btn-size-large,
  'super': $btn-size-super
) !default;

// btn-font-size map
$btn-font-sizes: (
  'small': $btn-font-size-small,
  'middle': $btn-font-size-middle,
  'large': $btn-font-size-large,
  'super': $btn-font-size-super
) !default;
// scss-docs-end btn-variables

.mx {
  &-button {
    display: inline-block;
    border: none;
    outline: none;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    background: transparent;
    font-weight: 500;

    transition: all $duration $time-function;

    @include disabled();

    @each $name, $height in $btn-sizes {
      &--#{$name} {
        height: $height;
        line-height: $height;

        font-size: map-get($map: $btn-font-sizes, $key: $name);

        @if ($name == 'small') {
          padding-left: 12px;
          padding-right: 12px;
          width: $btn-length-small;
        }

        @if ($name == 'middle') {
          padding-left: 16px;
          padding-right: 16px;
          width: $btn-length-middle;
        }

        @if ($name == 'large') {
          display: block;
          width: calc(100% - 50px * 2);
          margin-left: 50px;
          margin-right: 50px;
          padding-left: 24px;
          padding-right: 24px;
        }

        @if ($name == 'super') {
          display: block;
          width: calc(100% - 16px * 2);
          margin-left: 16px;
          margin-right: 16px;
          padding-left: 24px;
          padding-right: 24px;
        }

        &.mx-button--plain {
          line-height: subtract($height, 2px);
        }

        &.mx-button--round {
          border-radius: div($height, 2);
        }
      }
    }

    @each $name, $color in $btn-theme-colors {
      &--#{$name} {
        &.mx-button--fill {
          background: $color;
          color: $white;

          &.mx-button--active:not(.mx-button--disabled) {
            background: shift-color($color, 10%);
          }
        }

        &.mx-button--weak {
          $weak-bg: shift-color($color, -85%);
          background-color: $weak-bg;
          color: $color;

          &.mx-button--active:not(.mx-button--disabled) {
            background: shift-color($weak-bg, 10%);
          }
        }

        &.mx-button--plain {
          border: 1px solid $color;
          color: $color;

          &.mx-button--active:not(.mx-button--disabled) {
            background: shift-color($color, -85%);
          }
        }

        &.mx-button--text {
          color: $color;

          &.mx-button--active:not(.mx-button--disabled) {
            color: shift-color($color, 10%);
          }
        }
      }
    }

    &-icon {
      &--left{
        margin-right: $padding-sm;
      }

      &--right{
        margin-left: $padding-sm;
      }

      @each $name, $size in $btn-font-sizes{
        &--#{$name}{
          font-size: $size;
        }
      }
    }

    &-loading{
      display: inline-block;
      color: inherit;
      font-size: inherit;
      vertical-align: top !important;

      &--left{
        margin-right: $padding-sm;
      }

      &--right{
        margin-left: $padding-sm;
      }
    }
  }
}