@import '../../src/scss/vars';
@import '../../src/scss/mixins';
@import '../../src/scss/animate';

@mixin grayLoading {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  background-image: url("../src/icons/loading-gray.svg");
  background-size: 100%;
  animation: ymuLoading 1s steps(12, end) infinite;
}

@mixin whiteLoading {
  @include grayLoading;
  // background-image: url(../../src/icons/loading-white.svg);
}

.ymu-button {
  position: relative;
  border: 0;
  padding: 0;
  text-overflow: ellipsis;
  word-break: break-word;
  white-space: nowrap;
  text-align: center;
  user-select: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  img {
    vertical-align: middle;
  }
  &:focus {
    outline: none;
  }
}

.ymu-button--large {
  height: $button-large-height;
  font-size: $button-large-font-size;
  line-height: $button-large-height;
  padding-left: $button-large-herizontal-padding;
  padding-right: $button-large-herizontal-padding;
  &.ymu-button--radius {
    border-radius: $button-large-border-radius;
  }
  &.ymu-button--round {
    padding-left: $button-large-herizontal-round-padding;
    padding-right: $button-large-herizontal-round-padding;
    border-radius: $button-large-herizontal-round-radius;
  }
  &.ymu-button--plain {
    line-height: $button-large-height - 2;
  }
}

.ymu-button--normal {
  height: $button-normal-height;
  font-size: $button-normal-font-size;
  line-height: $button-normal-height;
  padding-left: $button-normal-herizontal-padding;
  padding-right: $button-normal-herizontal-padding;
  &.ymu-button--radius {
    border-radius: $button-normal-border-radius;
  }
  &.ymu-button--round {
    padding-left: $button-normal-herizontal-round-padding;
    padding-right: $button-normal-herizontal-round-padding;
    border-radius: $button-normal-herizontal-round-radius;
  }
  &.ymu-button--plain {
    line-height: $button-normal-height - 2;
  }
}

.ymu-button--small {
  height: $button-small-height;
  font-size: $button-small-font-size;
  line-height: $button-small-height;
  padding-left: $button-small-herizontal-padding;
  padding-right: $button-small-herizontal-padding;
  &.ymu-button--radius {
    border-radius: $button-small-border-radius;
  }
  &.ymu-button--round {
    padding-left: $button-small-herizontal-round-padding;
    padding-right: $button-small-herizontal-round-padding;
    border-radius: $button-small-herizontal-round-radius;
  }
  &.ymu-button--plain {
    line-height: $button-small-height - 2;
  }
}

.ymu-button--mini {
  height: $button-mini-height;
  font-size: $button-mini-font-size;
  line-height: $button-mini-height;
  padding-left: $button-mini-herizontal-padding;
  padding-right: $button-mini-herizontal-padding;
  &.ymu-button--radius {
    border-radius: $button-mini-border-radius;
  }
  &.ymu-button--round {
    padding-left: $button-mini-herizontal-round-padding;
    padding-right: $button-mini-herizontal-round-padding;
    border-radius: $button-mini-herizontal-round-radius;
  }
  &.ymu-button--plain {
    line-height: $button-mini-height - 2;
  }
}

// 按钮类型维度
.ymu-button--light {
  background-color: $button-light-bg-color;
  border-color: transparent;
  border: 1px solid $button-light-border-color;
  .ymu-loading {
    @include grayLoading;
  }
  &.ymu-button--plain {
    color: $button-light-font-color;
    background: transparent;
    border: 1px solid $button-light-border-color;
  }
  &.ymu-button--clear {
    color: $button-light-font-color;
    background: transparent;
    border: none;
  }
}

.ymu-button--primary {
  color: $button-primary-font-color;
  background-color: $button-primary-bg-color;
  border-color: transparent;
  .ymu-loading {
    @include whiteLoading;
  }
  &.ymu-button--plain {
    color: $button-primary-bg-color;
    background: transparent;
    border: 1px solid $button-primary-bg-color;
  }
  &.ymu-button--clear {
    color: $button-primary-bg-color;
    background: transparent;
    border: none;
  }
}

.ymu-button--warn {
  color: $button-warn-font-color;
  background-color: $button-warn-bg-color;
  border-color: transparent;
  .ymu-loading {
    @include whiteLoading;
  }
  &.ymu-button--plain {
    color: $button-warn-bg-color;
    background: transparent;
    border: 1px solid $button-warn-bg-color;
  }
  &.ymu-button--clear {
    color: $button-warn-bg-color;
    background: transparent;
    border: none;
  }
}

.ymu-button--danger {
  color: $button-danger-font-color;
  background-color: $button-danger-bg-color;
  border-color: transparent;
  .ymu-loading {
    @include whiteLoading;
  }
  &.ymu-button--plain {
    color: $button-danger-bg-color;
    background: transparent;
    border: 1px solid $button-danger-bg-color;
  }
  &.ymu-button--clear {
    color: $button-danger-bg-color;
    background: transparent;
    border: none;
  }
}

// block state
.ymu-button--block {
  display: block;
  width: 100%;
  font-size: $button-block-font-size;
}

// inline state
.ymu-button--inline {
  display: inline-block;
}

// disabled state
.ymu-button--disabled {
  opacity: $button-disabled-opacity;
}

// 点击效果
.ymu-button--clickable {
  &::before {
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    width: 100%;
    height: 100%;
    border: inherit;
    border-color: #000;
    background-color: #000;
    border-radius: inherit;
    transform: translate(-50%, -50%);
  }
  &:active::before {
    opacity: $button-active-opacity;
  }
}