@import "src/components/variable";
$border-color: #d9d9d9;
$color: #333;
$radius: 4px;
$grey: gray;
.gulu-button {
  position: relative;
  box-sizing: border-box;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: white;
  color: $color;
  border: 1px solid $border-color;
  border-radius: $radius;
  white-space: nowrap;
  box-shadow: 0 1px 0 fade-out(black, 0.95);
  padding: 4px 16px;
  line-height: 22px;
  transition: all 300ms;
  margin: 0 2px;
  &:hover,
  &:focus {
    color: $main;
    border-color: $main;
    > .gulu-loadingIndicator {
      border-color: $main $main $main transparent;
    }
  }
  &:focus {
    outline: none;
  }
  // 支持 size
  &.gulu-theme-link {
    line-height: 32px;
    display: inline-block;
    border-color: transparent;
    box-shadow: none;
    color: $main;
    text-decoration: none;
    &:hover, &:focus {
      color: lighten($main, 10%);
    }
    &.gulu-size-big {
      font-size: 24px;
      height: 48px;
      padding: 0 16px;
      line-height: 48px;
    }
    &.gulu-size-small {
      font-size: 14px;
      height: 24px;
      padding: 0 7px;
    }
  }
  &.gulu-theme-text {
    border-color: transparent;
    box-shadow: none;
    color: inherit;
    &:hover, &:focus {
      background: darken(white, 5%);;
    }
    &.gulu-size-big {
      font-size: 24px;
      height: 48px;
      padding: 0 16px
    }
    &.gulu-size-small {
      font-size: 14px;
      height: 24px;
      padding: 0 7px;
    }
  }
  &.gulu-theme-button {
    &.gulu-size-big {
      font-size: 24px;
      height: 48px;
      padding: 0 16px
    }
    &.gulu-size-small {
      font-size: 14px;
      height: 24px;
      padding: 0 7px;
    }
  }
  // 支持 level
  &.gulu-theme-button {

    &:active::after {
      transform: scale(0, 0);
      opacity: 0.3;
      transition: 0s;
    }
    &.gulu-level-main {
      background: $main;
      color: white;
      border-color: $main;
      > .gulu-loadingIndicator {
        border-color: white white white transparent;
      }
      &:hover,
      &:focus {
        background: darken($main, 10%);
        border-color: darken($main, 10%);
      }
    }
    &.gulu-level-danger {
      background: $danger;
      border-color: $danger;
      color: white;
      > .gulu-loadingIndicator {
        border-color: white white white transparent;
      }
      &:hover,
      &:focus {
        background: darken($danger, 10%);
        border-color: darken($danger, 10%);
      }
    }
    &.gulu-level-waring {
      > .gulu-loadingIndicator {
        border-color: white white white transparent;
      }
      background: $warning;
      border-color: $warning;
      color: white;
      &:hover,
      &:focus {
        background: darken($warning, 10%);
        border-color: darken($warning, 10%);
      }
    }
    &.gulu-level-success {
      > .gulu-loadingIndicator {
        border-color: white white white transparent;
      }
      background: $success;
      border-color: $success;
      color: white;
      &:hover,
      &:focus {
        background: darken($success, 10%);
        border-color: darken($success, 10%);
      }
    }
  }
  &.gulu-theme-link {
    &.gulu-level-danger {
      color: $danger;
      &:hover,
      &:focus {
        color: darken($danger, 10%);
      }
    }
    &.gulu-level-waring {
      color: $warning;
      &:hover,
      &:focus {
        color: darken($warning, 10%);
      }
    }
    &.gulu-level-success {
      color: $success;
      &:hover,
      &:focus {
        color: darken($success, 10%);
      }
    }
  }
  &.gulu-theme-text {
    &:active::after {
      transform: scale(0, 0);
      opacity: 0.3;
      transition: 0s;
    }
    &.gulu-level-main {
      color: $main;
      &:hover,
      &:focus {
        color: darken($main, 10%);
      }
    }
    &.gulu-level-danger {
      color: $danger;
      &:hover,
      &:focus {
        color: darken($danger, 10%);
      }
    }
    &.gulu-level-waring {
      color: $warning;
      &:hover,
      &:focus {
        color: darken($warning, 10%);
      }
    }
    &.gulu-level-success {
      color: $success;
      &:hover,
      &:focus {
        color: darken($success, 10%);
      }
    }
  }
  // 支持 disabled
  &.gulu-theme-button {
    &[disabled] {
      cursor: not-allowed;
      color: $grey;
      pointer-events: none;
      &:hover {
        border-color: $grey;
      }
    }
  }
  &.gulu-theme-text {
    &[disabled] {
      cursor: not-allowed;
      color: $grey;
      pointer-events: none;
    }
  }
  &.gulu-theme-link {
    &.disabled {
      cursor: not-allowed;
      color: $grey;
      pointer-events: none;
    }
  }
  // 支持loading
  > .gulu-loadingIndicator {
    width: 12px;
    height: 12px;
    display: inline-block;
    margin-right: 4px;
    border-radius: 8px;
    border-color: $color $color $color transparent;
    border-style: solid;
    border-width: 2px;
    animation: gulu-spin 1s infinite linear;
  }
  // 支持波纹效果
  &.gulu-theme-button,&.gulu-theme-text {
    overflow: hidden;
    &:after {
      content: '';
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      pointer-events: none;
      background-image: radial-gradient(circle, #666 10%, transparent 10.01%);
      background-repeat: no-repeat;
      background-position: 50%;
      transform: scale(10, 10);
      opacity: 0;
      transition: transform 0.3s, opacity 0.6s;
    }
  }
}
@keyframes gulu-spin {
  0% {transform: rotate(0deg)}
  100% {transform: rotate(360deg)}
}