@import 'align';
@import 'color';
@import 'size';
@import 'transition';

@button-size: 36px;
@button-label-color: var(--label-primary);
@button-background-color: var(--background-primary);
@button-hover-color: var(--system-grey4);
@button-active-color: var(--system-blue);
@button-active-label-color: var(--system-white);

// button 应有的样式
.default-button(@width: @button-size, @background-color: @button-background-color) {
  @ratio: 0.618;
  .size(@width, @ratio * @width);
  .flex-diagonal-center;
  .button-transition;
  cursor: pointer;
  background-color: @button-background-color;
  color: @button-label-color;

  &:hover {
    background-color: @button-hover-color;
  }

  &.is-active {
    background-color: @button-active-color;
    color: @button-active-label-color;
  }
}

.square-button(@width: @button-size, @button-background-color: @button-background-color) {
  .default-button(@width);
  @radius-ratio: 0.216;
  .size(@width, @width, @radius-ratio * @width);
  box-shadow: var(--card-shadow-secondary);
}

.round-button(@width: @button-size) {
  .default-button(@width);
  @radius-ratio: 0.5;
  .size(@width, @width, @radius-ratio * @width);
  box-shadow: var(--button-shadow-secondary);
}

.card-button(@width: @button-size, @height: @width / 6) {
  .default-button(@width);
  @radius-ratio: 0.05;
  .size(@width, @height, @radius-ratio * @width);
  box-shadow: var(--card-shadow-secondary);
}