/**
 * 可清除原生button, input[type="submit"], input[type="reset"]样式
 */
@mixin clear-native-button() {
  -webkit-tap-highlight-color: inherit;
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  line-height: inherit;
  font: inherit;
  font-size: inherit;
  margin: 0;
  cursor: pointer;
  outline: inherit;

  &::after {
    border: none;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    background: none;
  }
}

/** 通过 `::before` 改变 `:hover` 和 `:active` 的样式*/
@mixin button-hover-active() {
  position: relative;
  cursor: pointer;

  &:hover,
  &:active {
    &::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 100%;
      background-color: #999;
      color: #999;
    }
  }
  &:hover {
    &::before {
      opacity: 0.3;
    }
  }
  &:active {
    &::before {
      opacity: 0.2;
    }
  }
}

@mixin button-elevation(
  $from: var(--yl-elevation-1),
  $to: var(--yl-elevation-4)
) {
  cursor: pointer;

  box-shadow: $from;

  &:hover {
    box-shadow: $to;
  }

  &:active {
    box-shadow: $from;
  }
}

@mixin button() {
  @include button-hover-active();
  @include button-elevation();
  cursor: pointer;
}