@button-default-color: #f5f5f5;
@button-primary-color: var(--color-primary);
@button-danger-color: var(--color-danger);
@button-success-color: var(--color-success);
@button-warning-color: var(--color-warning);
@button-info-color: var(--color-info);
@button-disabled-color: var(--color-disabled);
@button-disabled-text-color: var(--color-text-disabled);
@button-border-radius: 4px;
@button-mini-padding: 0 9px;
@button-small-padding: 0 11px;
@button-normal-padding: 0 15px;
@button-large-padding: 0 22px;
@button-round-padding: 6px;
@button-mini-height: 20px;
@button-small-height: 28px;
@button-normal-height: 36px;
@button-large-height: 44px;

:root {
  --button-default-color: @button-default-color;
  --button-primary-color: @button-primary-color;
  --button-danger-color: @button-danger-color;
  --button-success-color: @button-success-color;
  --button-warning-color: @button-warning-color;
  --button-info-color: @button-info-color;
  --button-disabled-color: @button-disabled-color;
  --button-disabled-text-color: @button-disabled-text-color;
  --button-border-radius: @button-border-radius;
  --button-mini-padding: @button-mini-padding;
  --button-small-padding: @button-small-padding;
  --button-normal-padding: @button-normal-padding;
  --button-large-padding: @button-large-padding;
  --button-round-padding: @button-round-padding;
  --button-mini-height: @button-mini-height;
  --button-small-height: @button-small-height;
  --button-normal-height: @button-normal-height;
  --button-large-height: @button-large-height;
}

.var-button {
  position: relative;
  justify-content: center;
  align-items: center;
  outline: none;
  border: none;
  border-radius: var(--button-border-radius);
  user-select: none;
  cursor: pointer;
  font-family: inherit;
  transition: box-shadow 0.2s, background-color 0.25s;
  will-change: box-shadow;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  white-space: nowrap;
  line-height: 1;

  &:active {
    box-shadow: 0 3px 5px -1px var(--shadow-key-umbra-opacity), 0 5px 8px 0 var(--shadow-key-penumbra-opacity),
      0 1px 14px 0 var(--shadow-key-ambient-opacity);
  }

  &__loading[var-button-cover] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  &--default {
    color: inherit;
    background-color: var(--button-default-color);
  }

  &--primary {
    color: #fff;
    background-color: var(--button-primary-color);
  }

  &--info {
    color: #fff;
    background-color: var(--button-info-color);
  }

  &--success {
    color: #fff;
    background-color: var(--button-success-color);
  }

  &--warning {
    color: #fff;
    background-color: var(--button-warning-color);
  }

  &--danger {
    color: #fff;
    background-color: var(--button-danger-color);
  }

  &--disabled {
    background-color: var(--button-disabled-color);
    color: var(--button-disabled-text-color);
    cursor: not-allowed;
    box-shadow: none !important;
  }

  &--block {
    width: 100%;
  }

  &--text {
    background-color: transparent;

    &:active {
      box-shadow: none;
    }
  }

  &--text-default {
    color: inherit;
  }

  &--text-primary {
    color: var(--button-primary-color);
  }

  &--text-info {
    color: var(--button-info-color);
  }

  &--text-success {
    color: var(--button-success-color);
  }

  &--text-warning {
    color: var(--button-warning-color);
  }

  &--text-danger {
    color: var(--button-danger-color);
  }

  &--text-disabled {
    color: var(--button-disabled-text-color);
  }

  &--normal {
    height: var(--button-normal-height);
    padding: var(--button-normal-padding);
    font-size: var(--font-size-md);
  }

  &--large {
    height: var(--button-large-height);
    padding: var(--button-large-padding);
    font-size: var(--font-size-lg);
  }

  &--small {
    height: var(--button-small-height);
    padding: var(--button-small-padding);
    font-size: var(--font-size-sm);
  }

  &--mini {
    height: var(--button-mini-height);
    padding: var(--button-mini-padding);
    font-size: var(--font-size-xs);
  }

  &--round {
    padding: var(--button-round-padding);
    border-radius: 50%;
    height: auto;
  }

  &--outline {
    border: thin solid currentColor;
  }

  &--hidden {
    opacity: 0;
  }
}