/**Variable**/
@import './helpers/mixin.scss';

$btnThemeList: (
  (
    name: "primary",
    textColor: $s-primary-color,
    btnColor: #fff,
    plainColor: $s-primary-plain-color,
    plainBorderColor: $s-primary-plain-border-color,
    btnBackground: $s-primary-color
  ),
  (
    name: "success",
    textColor: $s-success-color,
    btnColor: #fff,
    plainColor: $s-success-plain-color,
    plainBorderColor: $s-success-plain-border-color,
    btnBackground: $s-success-color
  ),
  (
    name: "info",
    textColor: $s-info-color,
    btnColor: #fff,
    plainColor: $s-info-plain-color,
    plainBorderColor: $s-info-plain-border-color,
    btnBackground: $s-info-color
  ),
  (
    name: "warning",
    textColor: $s-warning-color,
    btnColor: #fff,
    plainColor: $s-warning-plain-color,
    plainBorderColor: $s-warning-plain-border-color,
    btnBackground: $s-warning-color
  ),
  (
    name: "danger",
    textColor: $s-danger-color,
    btnColor: #fff,
    plainColor: $s-danger-plain-color,
    plainBorderColor: $s-danger-plain-border-color,
    btnBackground: $s-danger-color
  ),
  (
    name: "perfect",
    textColor: $s-table-header-background-color,
    btnColor: $s-font-color,
    plainColor: $s-danger-plain-color,
    plainBorderColor: $s-danger-plain-border-color,
    btnBackground: $s-table-header-background-color
  )
);

.s-button {
  position: relative;
  text-align: center;
  background-color: $s-button-default-background-color;
  outline: 0;
  font-size: $s-font-size;
  white-space: nowrap;
  user-select: none;
  @include animatTransition(border, .2s);
  &.is--disabled {
    color: $s-disabled-color;
    &:not(.is--loading) {
      cursor: no-drop;
    }
  }
  &:not(.is--disabled) {
    color: $s-font-color;
    cursor: pointer;
  }
  &.is--loading {
    &:before {
      content: "";
      position: absolute;
      left: -1px;
      top: -1px;
      right: -1px;
      bottom: -1px;
      border-radius: inherit;
      background-color: hsla(0,0%,100%,.35);
      pointer-events: none;
    }
  }
  &.type--text {
    text-decoration: none;
    border: 0;
    background-color: transparent;
    &:not(.is--disabled) {
      &:hover {
        color: lighten($s-primary-color, 10%);
      }
    }
    @for $index from 0 to length($btnThemeList) {
      $item: nth($btnThemeList, $index + 1);
      $textColor: map-get($item, textColor);
      &.theme--#{map-get($item, name)} {
        color: $textColor;
        &:not(.is--disabled) {
          &:hover {
            color: lighten($textColor, 10%);
          }
        }
        &.is--disabled {
          color: lighten($textColor, 20%);
        }
      }
    }
  }
  &.type--plain {
    padding: 0 1em;
    height: $s-button-height-default;
    line-height: $s-button-height-default - 2px;
    border: 1px solid $s-input-border-color;
    border-radius: 0.2em;
    &:not(.is--disabled) {
      &:active {
        background-color: darken($s-button-default-background-color, 3%);
      }
      &:focus {
        border-color: $s-primary-color;
        box-shadow: 0 0 0.2em 0 $s-primary-color;
      }
    }
    &:not(.is--disabled) {
      &:hover {
        color: lighten($s-primary-color, 6%);
      }
      &:active {
        color: darken($s-primary-color, 3%);
        border-color: darken($s-primary-color, 3%);
      }
    }
    @for $index from 0 to length($btnThemeList) {
      $item: nth($btnThemeList, $index + 1);
      $btnColor: map-get($item, btnColor);
      $textColor: map-get($item, textColor);
      $plainColor: map-get($item, plainColor);
      $plainBorderColor: map-get($item, plainBorderColor);
      $btnBackground: map-get($item, btnBackground);
      &.theme--#{map-get($item, name)} {
        color: $textColor;
        &:not(.is--disabled) {
          border-color: $plainBorderColor;
          background-color: $plainColor;
          &:hover {
            color: $btnColor;
            background-color: $btnBackground;
            border-color: $plainBorderColor;
          }
          &:active {
            color: $btnColor;
            background-color: $btnBackground;
            border-color: $plainBorderColor;
          }
        }
        &.is--disabled {
          border-color: lighten($plainBorderColor, 20%);
          background-color: lighten($plainColor, 20%);
        }
        &.is--loading {
          border-color: $plainBorderColor;
          background-color: $plainColor;
        }
      }
    }
  }
  &.type--button {
    padding: 0 1em;
    height: $s-button-height-default;
    line-height: $s-button-height-default - 2px;
    border: 1px solid $s-input-border-color;
    border-radius: 0.2em;
    &:not(.is--disabled) {
      &:active {
        background-color: darken($s-button-default-background-color, 3%);
      }
      &:focus {
        border-color: $s-primary-color;
        box-shadow: 0 0 0.2em 0 $s-primary-color;
      }
    }
    &:not(.is--disabled) {
      &:hover {
        color: lighten($s-primary-color, 6%);
      }
      &:active {
        color: darken($s-primary-color, 3%);
        border-color: darken($s-primary-color, 3%);
      }
    }
    @for $index from 0 to length($btnThemeList) {
      $item: nth($btnThemeList, $index + 1);
      $btnColor: map-get($item, btnColor);
      $btnBackground: map-get($item, btnBackground);
      &.theme--#{map-get($item, name)} {
        color: $btnColor;
        &:not(.is--disabled) {
          border-color: $btnBackground;
          background-color: $btnBackground;
          &:hover {
            color: $btnColor;
            background-color: lighten($btnBackground, 6%);
            border-color: lighten($btnBackground, 6%);
          }
          &:active {
            color: $btnColor;
            background-color: darken($btnBackground, 3%);
            border-color: darken($btnBackground, 3%);
          }
        }
        &.is--disabled {
          border-color: lighten($btnBackground, 20%);
          background-color: lighten($btnBackground, 20%);
        }
        &.is--loading {
          border-color: $btnBackground;
          background-color: $btnBackground;
        }
      }
    }
  }
  &.size--medium {
    font-size: $s-font-size-medium;
    &.type--button {
      height: $s-button-height-medium;
      line-height: $s-button-height-medium - 2px;
    }
  }
  &.size--small {
    font-size: $s-font-size-small;
    &.type--button {
      height: $s-button-height-small;
      line-height: $s-button-height-small - 2px;
    }
  }
  &.size--mini {
    font-size: $s-font-size-mini;
    &.type--button {
      height: $s-button-height-mini;
      line-height: $s-button-height-mini - 2px;
    }
  }
}
.s-input,
.s-button {
  &+.s-button,
  &+.s-button--dropdown {
    margin-left: 0.8em;
  }
}
.s-button--loading-icon,
.s-button--icon {
  &+.s-button--content {
    margin-left: 0.3em;
  }
}
.s-button--wrapper,
.s-button--dropdown {
  display: inline-block;
}
.s-button--dropdown {
  position: relative;
  &+.s-button,
  &+.s-button--dropdown {
    margin-left: 0.8em;
  }
  & > .s-button {
    &.type--button {
      @for $index from 0 to length($btnThemeList) {
        $item: nth($btnThemeList, $index + 1);
        $btnColor: map-get($item, btnColor);
        &.theme--#{map-get($item, name)} {
          color: $btnColor;
        }
      }
    }
  }
  &.is--active {
    & > .s-button {
      &:not(.is--disabled) {
        color: lighten($s-primary-color, 6%);
      }
      &.type--text {
        @for $index from 0 to length($btnThemeList) {
          $item: nth($btnThemeList, $index + 1);
          $textColor: map-get($item, textColor);
          &.theme--#{map-get($item, name)} {
            color: lighten($textColor, 10%);
          }
        }
      }
      &.type--button {
        @for $index from 0 to length($btnThemeList) {
          $item: nth($btnThemeList, $index + 1);
          $btnColor: map-get($item, btnColor);
          $btnBackground: map-get($item, btnBackground);
          &.theme--#{map-get($item, name)} {
            color: $btnColor;
            background-color: lighten($btnBackground, 6%);
            border-color: lighten($btnBackground, 6%);
          }
        }
      }
    }
    .s-button--dropdown-arrow {
      transform: rotate(180deg);
    }
  }
}

.s-button--dropdown-arrow {
  font-size: 12px;
  margin: -0.18em 0 0 0.3em;
  @include animatTransition(transform, .2s);
}

.s-button--dropdown-panel {
  display: none;
  position: absolute;
  left: 0;
  padding: 0.2em 0;
  &.animat--leave {
    display: block;
    opacity: 0;
    transform: scaleY(0.5);
    transition: transform 0.2s, opacity 0.2s;
    transform-origin: 0% 0%;
  }
  &.animat--enter {
    opacity: 1;
    transform: scaleY(1);
  }
}
.s-button--dropdown-wrapper {
  padding: 5px;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid $s-input-border-color;
  box-shadow: 0 1px 6px rgba(0,0,0,.2);
  & > .s-button {
    margin: 0;
    display: block;
    width: 100%;
    border: 0;
    &.type--text {
      padding: 2px 8px;
    }
  }
}