@import "../style/var.less";


:root {
  --var-button-small-height: 24px;
  --var-button-normal-height: 32px;
  --var-button-large-height: 44px;
  --var-button-small-padding: 0 4px;
  --var-button-normal-padding: 0 8px;
  --var-button-large-padding: 0;

  --var-button-small-radius:2px;
  --var-button-normal-radius:4px;
  --var-button-large-radius:6px;

  --var-button-default-type: @color-default;
  --var-button-primary-type: @color-primary;
  --var-button-success-type: @color-success;
  --var-button-warning-type: @color-warning;
  --var-button-danger-type: @color-danger;
  --var-button-info-type: @color-info;

  --var-button-disabled: @color-disabled;
}


.yh-config-dark {
  .yh-button {
    &-type-default,
    &-type-primary,
    &-type-success,
    &-type-warning,
    &-type-danger,
    &-type-info {
      box-shadow:none;
    }
  } 
} 



.yh-button {
  display: inline-block;
  overflow: hidden;
  position: relative;
  height: var(--var-button-normal-height);
  color: #fff;
  user-select: none;
  text-align: center;
  font-size: 15px;
  border-radius: var(--var-button-radius);
  outline: none;
  border: none;
  display: flex;
  &:active {
    opacity: 0.8;
  }
  &-loading {
    &:active {
      opacity: 1;
    }
  }
  &-type-default {
    background: var(--var-button-default-type);
    color: @color-text;
    box-shadow: 1px 1px 4px 1px @color-border;
  }
  &-type-primary {
    background: var(--var-button-primary-type);
    box-shadow: 1px 1px 4px 1px var(--var-button-primary-type);
  }
  &-type-success {
    background: var(--var-button-success-type);
    box-shadow: 1px 1px 4px 1px var(--var-button-success-type);
  }
  &-type-warning {
    background: var(--var-button-warning-type);
    box-shadow: 1px 1px 4px 1px var(--var-button-warning-type);
  }
  &-type-danger {
    background: var(--var-button-danger-type);
    box-shadow: 1px 1px 4px 1px var(--var-button-danger-type);
  }
  &-type-info {
    background: var(--var-button-info-type);
    box-shadow: 1px 1px 4px 1px var(--var-button-info-type);
  }

  &-size-small {
    height: var(--var-button-small-height);
    line-height: var(--var-button-small-height);
    border-radius: var(--var-button-small-radius);
    .yh-button-text {
      padding: var(--var-button-small-padding);
    }
    &.button-circle {
      width: var(--var-button-small-height);
    }
  }
  &-size-normal {
    height: var(--var-button-normal-height);
    line-height: var(--var-button-normal-height);
    border-radius: var(--var-button-normal-radius);

    .yh-button-text {
      padding: var(--var-button-normal-padding);
    }
    &.button-circle {
      width: var(--var-button-normal-height);
    }
  }
  &-size-large {
    height: var(--var-button-large-height);
    line-height: var(--var-button-large-height);
    width: 100%;
    border-radius: var(--var-button-large-radius);

    .yh-button-text {
      padding: var(--var-button-large-padding);
    }
    &.button-circle {
      width: var(--var-button-large-height);
    }
  }

  .yh-button-text {
    height: 100%;
  }

  &-disabled {
    pointer-events:none;
    background: var(--var-button-disabled);
    opacity: 0.5;
    color: @color-grey;
    box-shadow: none;
  }

  &.button-circle {
    width: auto;
    height: auto;
    border-radius: 50%;
    // padding: 5px;
  }

  &-round {
    border-radius: 10px;
  }
 
}