.s-button {
  font-size: inherit;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  cursor: pointer;
  user-select: none;
  transition: opacity .2s;
  vertical-align: middle;
  color: inherit;
  border-width: 0;
  border-style: solid;
  border-color: $button-border-color;
  border-radius: $button-border-radius;
  outline: none;
  background: transparent;
  appearance: none;
  touch-action: manipulation;
  -webkit-appearance: none;
  -webkit-text-size-adjust: 100%;

  &--default,
  &--plain {
    border-width: $button-border-width;
  }

  &::before {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    pointer-events: none;
    opacity: 0;
    background: $black;
  }

  &::after {
    border-width: 0;
  }

  &__content {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 100%;
  }

  &__text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    &:not(:first-child) {
      margin-left: $padding-base;
    }

    &:empty {
      display: none;
    }
  }

  ::v-deep#{&} {

    &__loading,
    &__icon {
      color: inherit;
    }

    &__loading {
      font-size: $button-loading-size;
    }

    &__icon {
      font-size: $button-icon-size;
    }
  }

  &--hover::before {
    opacity: $button-hover-mask-opacity;
  }

  &--plain#{&}--hover::before {
    opacity: $button-plain-hover-mask-opacity;
  }

  &--default {
    color: $button-default-color;
    border-color: $button-default-border-color;
    background: $button-default-background;
  }

  &--primary {
    color: $button-primary-color;
    border-color: $button-primary-border-color;
    background: $button-primary-background;
  }

  &--info {
    color: $button-info-color;
    border-color: $button-info-border-color;
    background: $button-info-background;
  }

  &--success {
    color: $button-success-color;
    border-color: $button-success-border-color;
    background: $button-success-background;
  }

  &--warning {
    color: $button-warning-color;
    border-color: $button-warning-border-color;
    background: $button-warning-background;
  }

  &--danger {
    color: $button-danger-color;
    border-color: $button-danger-border-color;
    background: $button-danger-background;
  }

  &--text {
    border-width: 0;

    &::before {
      display: none;
    }

    &::after {
      border-width: 0;
    }
  }

  &--text#{&}--hover &__text {
    opacity: $hover-opacity;
  }

  &--plain#{&} {
    &--primary {
      color: $button-primary-plain-color;
      background: $button-primary-plain-background;
    }

    &--info {
      color: $button-info-plain-color;
      background: $button-info-plain-background;
    }

    &--success {
      color: $button-success-plain-color;
      background: $button-success-plain-background;
    }

    &--warning {
      color: $button-warning-plain-color;
      background: $button-warning-plain-background;
    }

    &--danger {
      color: $button-danger-plain-color;
      background: $button-danger-plain-background;
    }
  }

  &--normal {
    font-size: $button-normal-font-size;
    height: $button-normal-height;
    padding: $button-normal-padding;
  }

  &--mini {
    font-size: $button-mini-font-size;
    height: $button-mini-height;
    padding: $button-mini-padding;
  }

  &--small {
    font-size: $button-small-font-size;
    height: $button-small-height;
    padding: $button-small-padding;
  }

  &--large {
    font-size: $button-large-font-size;
    width: 100%;
    height: $button-large-height;
    padding: $button-large-padding;
  }

  &--block {
    display: block;
  }

  &--hairline {
    border-width: 0;

    &::after {
      position: absolute;
      top: 0;
      left: 0;
      box-sizing: border-box;
      width: 200%;
      height: 200%;
      content: '';
      transform: scale(.5);
      transform-origin: 0 0;
      pointer-events: none;
      border-width: 1px;
      border-color: inherit;
      border-radius: $button-border-radius * 2;
    }
  }

  &--hairline#{&}--square,
  &--hairline#{&}--round,
  &--hairline#{&}--circle {
    &::after {
      border-radius: inherit;
    }
  }

  &--square {
    border-radius: 0;
  }

  &--round {
    border-radius: $button-round-border-radius;
  }

  &--circle {
    height: auto;
    padding: $button-circle-padding;
    border-radius: 50%;
  }

  &--loading {
    cursor: default;
    opacity: $loading-opacity;
  }

  &--disabled {
    cursor: not-allowed;
    opacity: $disabled-opacity;
  }
}