@charset "UTF-8";
@import "../config/variables";
@import "../mixins/button";
@import "../mixins/mixins";
@import "../mixins/utils";
@import "../mixins/typo";

@include b(button) {
  display: inline-block;
  white-space: nowrap;
  cursor: default;
  border: none;
  border-color: transparent;
  text-align: center;
  outline: none;
  // transition: all .1s ease-in-out;
  height: 52px;
  line-height: 52px;
  padding: $--size-base * 4 - 2px $--size-base * 6;
  -webkit-appearance: none;
  border-radius: $--border-radius;
  vertical-align: middle;
  @include bodyX;
  @include utils-user-select(none);
  color: $--color-buttonText;
  background-color: $--color-primary;
  box-shadow: 0 7px 14px 0 rgba($--color-primary, 0.2),
    0 2px 10px 0 rgba($--color-primary, 0.2);

  position: relative;

  & + .el-button {
    margin-left: $--size-base * 2;
  }
  &:after {
    content: "";
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: $--border-radius;
    border: 2px solid $--color-focus;
  }

  &:focus {
    &:after {
      display: block;
    }
  }
  &:hover {
    cursor: pointer;
    background: $--color-light;
    color: $--color-buttonText;
    box-shadow: 0 7px 14px 0 rgba($--color-primary, 0.2),
      0 2px 10px 0 rgba($--color-primary, 0.2);
    &:after {
      display: none;
    }
  }
  &:active {
    background: $--color-focus;
    color: $--color-buttonText;
    box-shadow: initial;
  }
  @include when(icon) {
    padding: $--size-base * 4 - 2px $--size-base * 4;
  }
  @include when(plain) {
    color: $--color-primary;
    box-shadow: inset 0 0 0 1px $--color-primary;
    background: $--color-white;
    &:hover {
      background: $--color-white;
      color: $--color-light;
      box-shadow: inset 0 0 0 1px $--color-light;
    }
    &:active {
      background: $--color-white;
      color: $--color-focus;
      box-shadow: inset 0 0 0 1px $--color-focus;
    }
  }
  @include when(disabled) {
    &,
    &:hover,
    &:focus,
    &:active {
      color: $--color-buttonText;
      box-shadow: initial;
      background: $--color-disabled;
      cursor: not-allowed;
    }
    @include when(plain) {
      &,
      &:hover,
      &:focus,
      &:active {
        box-shadow: 0 0 0 1px $--color-disabled;
        color: $--color-silver;
        background: $--color-white;
      }
    }
  }
  @include m(mini) {
    padding: $--size-base * 4;
    font-size: $--button-mini-fontsize;
    line-height: $--button-mini-lineheight;
    letter-spacing: $--button-mini-letterspacing;
    height: 48px;
    &.is-icon {
      &,
      .instore-icon,
      .el-icon {
        font-size: $--button-mini-lineheight;
        line-height: $--button-mini-lineheight;
      }
    }
  }
  @include when(full) {
    width: 100%;
  }
  @include when(loading) {
    position: relative;
    pointer-events: none;
    box-shadow: initial;

    &:before {
      pointer-events: none;
      content: "";
      position: absolute;
      left: -1px;
      top: -1px;
      right: -1px;
      bottom: -1px;
      border-radius: inherit;
      background-color: $--color-primary;
    }
    @include when(plain) {
      box-shadow: inset 0 0 0 1px $--color-primary;
      &:before {
        box-shadow: inset 0 0 0 1px $--color-primary;
        background-color: $--color-white;
      }
    }
    @include b(button-content) {
      opacity: 0;
    }
    @include b(spinner) {
      position: absolute;
      height: 24px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  @include m(text) {
    @include bodyX;
    background: transparent;
    height: 24px;
    box-shadow: none;
    color: $--color-primary;
    background: transparent;
    padding: 0;
    //margin: $--size-base * 3 $--size-base * 2;
    &.is-icon {
      padding: 0;
      &,
      .instore-icon,
      .el-icon {
        font-size: 24px;
        line-height: 24px;
      }
    }
    &:hover {
      background: transparent;
      color: $--color-light;
      box-shadow: none;
    }
    &:active {
      background: transparent;
      color: $--color-focus;
      box-shadow: none;
    }
    @include when(disabled) {
      &,
      &:hover,
      &:focus,
      &:active {
        color: $--color-silver;
        box-shadow: initial;
        cursor: not-allowed;
        background: transparent;
      }
    }
    @include when(loading) {
      &:before {
        background: transparent;
      }
    }
  }

  @include m(red) {
    background-color: $--color-error;
    box-shadow: 0 7px 14px 0 rgba($--color-error, 0.2),
      0 2px 10px 0 rgba($--color-error, 0.2);
    @include when(plain) {
      background: $--color-white;
      box-shadow: inset 0 0 0 1px $--color-error;
      color: $--color-error;
    }
    &.el-button--text {
      background: transparent;
      box-shadow: initial;
      color: $--color-error;
      @include when(disabled) {
        &,
        &:hover,
        &:focus,
        &:active {
          color: $--color-silver;
          box-shadow: initial;
          cursor: not-allowed;
          background: transparent;
        }
      }
    }
    &:hover {
      background-color: $--color-error-hover;
      box-shadow: 0 7px 14px 0 rgba($--color-error, 0.2),
        0 2px 10px 0 rgba($--color-error, 0.2);
      @include when(plain) {
        background: $--color-white;
        color: $--color-error-hover;
        box-shadow: inset 0 0 0 1px $--color-error;
      }
      &.el-button--text {
        background: transparent;
        color: $--color-error-hover;
        box-shadow: none;
      }
    }
    &:active {
      background: $--color-error-focus;
      box-shadow: initial;
      @include when(plain) {
        background: $--color-white;
        color: $--color-error-focus;
        box-shadow: inset 0 0 0 1px $--color-error;
      }
      &.el-button--text {
        background: transparent;
        color: $--color-error-focus;
        box-shadow: none;
      }
    }
  }
}