@import './theme/default';
@import './theme/font';
@import './mixins/pointer-events';

$btn-height-small: 24px;
$btn-height-normal: 32px;
$btn-height-large: 40px;

$btn-icon-size-small: 24px;
$btn-icon-size-small-font: 16px;
$btn-icon-size-normal: 28px;
$btn-icon-size-normal-font: 20px;
$btn-icon-size-large: 32px;
$btn-icon-size-large-font: 24px;

@mixin btn-white($prop) {
  @include theme-color($prop, stroke, 9);
}

@mixin btn-grey($prop) {
  @include theme-color($prop, stroke, 4);
}

@mixin btn-light-grey($prop) {
  @include theme-color($prop, stroke, 8);
}

/* styles begin */
$btn-primary: 4;
$btn-primary-hover: 5;
$btn-primary-active: 3;
$btn-primary-bg: 8;
$btn-danger: 2;
$btn-danger-hover: 3;
$btn-danger-active: 1;
$btn-danger-bg: 5;
$btn-success: 2;
$btn-success-hover: 3;
$btn-success-active: 1;
$btn-success-bg: 5;
$btn-warning: 2;
$btn-warning-hover: 3;
$btn-warning-active: 1;
$btn-warning-bg: 5;

@mixin btn-primary($prop) {
  @include theme-color($prop, primary, $btn-primary);
}

@mixin btn-primary-hover($prop) {
  @include theme-color($prop, primary, $btn-primary-hover);
}

@mixin btn-primary-active($prop) {
  @include theme-color($prop, primary, $btn-primary-active);
}

@mixin btn-danger($prop) {
  @include theme-color($prop, error, $btn-danger);
}

@mixin btn-danger-hover($prop) {
  @include theme-color($prop, error, $btn-danger-hover);
}

@mixin btn-danger-active {
  @include theme-color($prop, error, $btn-danger-active);
}

@mixin btn-success($prop) {
  @include theme-color($prop, success, $btn-success);
}

@mixin btn-success-hover($prop) {
  @include theme-color($prop, success, $btn-success-hover);
}

@mixin btn-success-active($prop) {
  @include theme-color($prop, success, $btn-success-active);
}

@mixin btn-warning-hover($prop) {
  @include theme-color($prop, warn, $btn-warning-hover);
}

@mixin btn-warning-active($prop) {
  @include theme-color($prop, warn, $btn-warning-active);
}
/* styles end */

@mixin btn-style($name, $default, $hover, $active) {
  @include btn-white(color);
  @include theme-color(background-color, $name, $default);
  @include theme-color(border-color, $name, $default);

  &:link,
  &:visited,
  &:focus {
    @include btn-white(color);
  }

  &:hover {
    @include btn-white(color);
    @include theme-color(background-color, $name, $hover);
    @include theme-color(border-color, $name, $hover);
  }

  &:active {
    @include btn-white(color);
    @include theme-color(background-color, $name, $active);
    @include theme-color(border-color, $name, $active);
  }

  &.zent-btn-loading {
    &:hover,
    &:active {
      @include theme-color(background-color, $name, $default);
      @include theme-color(border-color, $name, $default);
    }

    &::after {
      @include btn-white(border-top-color);
      @include btn-white(border-right-color);
      @include theme-color(border-bottom-color, $name, $active);
      @include theme-color(border-left-color, $name, $active);
    }
  }
}

@mixin btn-style-outline($name, $default, $hover, $active, $bg) {
  @include theme-color(color, $name, $default);
  @include theme-color(border-color, $name, $default);
  @include btn-white(background-color);

  &:link,
  &:visited,
  &:focus {
    @include theme-color(color, $name, $default);
  }

  &:hover {
    @include theme-color(color, $name, $hover);
    @include theme-color(border-color, $name, $hover);
    @include btn-white(background-color);
  }

  &:active {
    @include theme-color(color, stroke, 1);
    @include theme-color(background-color, stroke, 10);
    @include theme-color(border-color, stroke, 5);
  }

  &.zent-btn-loading {
    &:hover,
    &:active {
      @include theme-color(border-color, $name, $default);
      @include btn-white(background-color);
    }

    &::after {
      @include theme-color(border-top-color, $name, $default);
      @include theme-color(border-right-color, $name, $default);
      @include theme-color(border-bottom-color, $name, $bg);
      @include theme-color(border-left-color, $name, $bg);
    }
  }
}

.zent-btn {
  @include theme-color(color, 'default', 'color');
  @include theme-color(background-color, 'shadow', 'bg', 0.06);
  @include theme-color(border-color, 'shadow', 'bg', 0.06);
  display: inline-block;
  height: $btn-height-normal;
  line-height: $btn-height-normal - 2px;
  font-size: $font-size-normal;
  padding: 0 16px;
  border-radius: 2px;
  font-family: inherit;
  border-width: 1px;
  border-style: solid;
  text-align: center;
  vertical-align: middle;
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.3s;
  background-clip: padding-box;

  &:focus {
    outline: none;
  }

  &:link,
  &:visited,
  &:focus {
    @include theme-color(color, 'default', 'color');
    text-decoration: none;
  }

  &:hover {
    @include theme-color(background-color, 'shadow', 'bg', 0.03);
    @include theme-color(border-color, 'shadow', 'bg', 0.03);
    text-decoration: none;
  }

  &:active {
    @include theme-color(color, 'default', 'color');
    @include theme-color(background-color, 'shadow', 'bg', 0.09);
    text-decoration: none;
  }

  &.zent-btn-loading {
    &.zent-btn-icon {
      background-color: transparent;
    }
    &.zent-btn-text {
      @include theme-color(background-color, primary, 4, 0.03);
    }
  }

  &[type='button'],
  &[type='reset'],
  &[type='submit'] {
    appearance: none;
  }

  & + &,
  &-disabled-wrapper + &,
  & + &-disabled-wrapper,
  &-disabled-wrapper + &-disabled-wrapper {
    margin-left: 16px;
  }

  &-large {
    padding: 0 24px;
    height: $btn-height-large;
    line-height: $btn-height-large - 2px;
    font-size: $font-size-large;
    &.zent-btn-icon {
      height: $btn-icon-size-large;
      width: $btn-icon-size-large;
      font-size: $btn-icon-size-large-font;
    }
  }

  &-small {
    height: $btn-height-small;
    line-height: $btn-height-small - 2px;
    padding: 0 8px;
    font-size: $font-size-small;
    &.zent-btn-icon {
      height: $btn-icon-size-small;
      width: $btn-icon-size-small;
      font-size: $btn-icon-size-small-font;
    }
  }

  &-block {
    display: block;
    width: 100%;
    padding: 0;
  }

  &-primary {
    @include btn-style(
      primary,
      $btn-primary,
      $btn-primary-hover,
      $btn-primary-active
    );
  }

  &-primary-outline {
    @include btn-style-outline(
      primary,
      $btn-primary,
      $btn-primary-hover,
      $btn-primary-active,
      $btn-primary-bg
    );
  }

  &-error,
  &-danger {
    @include btn-style(
      error,
      $btn-danger,
      $btn-danger-hover,
      $btn-danger-active
    );
  }

  &-error-outline,
  &-danger-outline {
    @include btn-style-outline(
      error,
      $btn-danger,
      $btn-danger-hover,
      $btn-danger-active,
      $btn-danger-bg
    );
  }

  &-success {
    @include btn-style(
      success,
      $btn-success,
      $btn-danger-hover,
      $btn-danger-active
    );
  }

  &-success-outline {
    @include btn-style-outline(
      success,
      $btn-success,
      $btn-danger-hover,
      $btn-danger-active,
      $btn-danger-bg
    );
  }

  &-warning {
    @include btn-style(
      warn,
      $btn-warning,
      $btn-warning-hover,
      $btn-warning-active
    );
  }

  &-warning-outline {
    @include btn-style-outline(
      warn,
      $btn-warning,
      $btn-warning-hover,
      $btn-warning-active,
      $btn-warning-bg
    );
  }

  &-disabled-wrapper {
    cursor: not-allowed;
  }

  &-disabled,
  &-disabled[disabled] {
    @include btn-grey(color);
    @include theme-color(background-color, stroke, 8);
    @include btn-light-grey(border-color);
    cursor: not-allowed;

    &:link,
    &:visited,
    &:focus {
      @include btn-grey(color);
    }

    &:hover {
      @include btn-grey(color);
      @include theme-color(background-color, stroke, 8);
      @include btn-light-grey(border-color);
    }

    &:active {
      @include btn-grey(color);
      @include theme-color(background-color, stroke, 8);
      @include btn-light-grey(border-color);
    }

    .zent-btn-disabled-wrapper & {
      @include prevent-pointer-events;
    }
  }

  &-text {
    @include theme-color(background-color, text-button, bg);
    @include theme-color(color, text-button, color);
    font-size: $font-size-small;
    height: $btn-height-small;
    line-height: $btn-height-small;
    padding: 0 8px;
    border: 0;

    &:link,
    &:visited,
    &:hover,
    &:active,
    &:focus {
      border: 0;
      @include theme-color(color, text-button, color);
    }

    &:hover {
      @include theme-color(background-color, text-button, hover-bg);
    }

    &:active {
      @include theme-color(background-color, text-button, active-bg);
    }
  }

  &-icon {
    height: $btn-icon-size-normal;
    width: $btn-icon-size-normal;
    font-size: $btn-icon-size-normal-font;
    color: $text-600;
    background-color: transparent;
    padding: 0;
    line-height: $btn-height-small;
    text-align: center;
    border-radius: 2px;
    border: 0;

    &:link,
    &:visited,
    &:hover,
    &:active,
    &:focus {
      color: $text-600;
    }

    &:hover {
      background-color: rgba(0, 0, 0, 0.05);
    }

    &:active {
      background-color: rgba(0, 0, 0, 0.1);
    }

    i.zenticon {
      margin: 0;

      &:last-child {
        margin: 0;
      }

      &:first-child {
        margin: 0;
      }
    }
  }

  &-loading {
    position: relative;
    color: transparent;
    cursor: not-allowed;

    &:link,
    &:visited,
    &:focus,
    &:hover,
    &:active {
      color: transparent;
    }

    &::before,
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 16px;
      height: 16px;
      margin-left: -8px;
      margin-top: -8px;
      border: 2px solid;
      border-radius: 8px;
      box-sizing: border-box;
    }

    &::after {
      @include theme-color(border-top-color, stroke, 1);
      @include theme-color(border-right-color, stroke, 1);
      @include theme-color(border-bottom-color, stroke, 8);
      @include theme-color(border-left-color, stroke, 8);
      animation: zent-ani-spin 0.6s linear;
      animation-iteration-count: infinite;
    }

    &.zent-btn-small::after,
    &.zent-btn-text::after {
      width: 12px;
      height: 12px;
      margin-left: -6px;
      margin-top: -6px;
      border-radius: 6px;
    }

    &.zent-btn-text::after {
      @include theme-color(border-top-color, primary, 4);
      @include theme-color(border-right-color, primary, 4);
      @include theme-color(border-bottom-color, default, selected-bg);
      @include theme-color(border-left-color, default, selected-bg);
    }

    &.zent-btn-icon::after {
      @include theme-color(border-top-color, stroke, 1);
      @include theme-color(border-right-color, stroke, 1);
    }
  }

  &#{&}-border-transparent {
    border-color: transparent;

    &:hover {
      border-color: transparent;
    }

    &:active {
      border-color: transparent;
    }
  }

  &:not(.zent-btn-icon, .zent-btn-text) .zenticon {
    font-size: 20px;
    vertical-align: -2px;
  }

  .zenticon:first-child {
    margin-right: 4px;
  }

  .zenticon:last-child {
    margin-left: 4px;
  }

  &-group {
    display: inline-block;
    .zent-btn + .zent-btn,
    .zent-btn-disabled-wrapper + .zent-btn,
    .zent-btn + .zent-btn-disabled-wrapper,
    .zent-btn-disabled-wrapper + .zent-btn-disabled-wrapper {
      margin-left: 1px;
    }

    .zent-btn {
      position: relative;
      border-radius: 0;

      &:hover {
        z-index: 2;
      }

      &:first-child {
        border-radius: 2px 0 0 2px;
      }

      &:last-child {
        border-radius: 0 2px 2px 0;
      }

      &-primary {
        &:not(:last-child) {
          @include btn-primary-hover(border-right-color);
        }

        &:not(:first-child) {
          @include btn-primary-hover(border-left-color);
        }
      }

      &-error,
      &-danger {
        &:not(:last-child) {
          @include btn-danger-hover(border-right-color);
        }

        &:not(:first-child) {
          @include btn-danger-hover(border-left-color);
        }
      }

      &-success {
        &:not(:last-child) {
          @include btn-success-hover(border-right-color);
        }

        &:not(:first-child) {
          @include btn-success-hover(border-left-color);
        }
      }

      &-warning {
        &:not(:last-child) {
          @include btn-warning-hover(border-right-color);
        }

        &:not(:first-child) {
          @include btn-warning-hover(border-left-color);
        }
      }
    }
  }
}