@import "../../styles/themes/variable.scss";

button.xh-button[disabled][type=primary] {
  background-color: var(--btn-color-disabled);
  color: #fff;
}

button.xh-button-ghost.xh-button-primary[type=primary] {
  background-color: #FFF;
  color: var(--color-primary);
}

button.xh-button[loading][type=primary] {
  background-color: var(--color-primary);
}
#{$xh-prefix}-button {
  position: relative;
  font-size: $btn-font-size;
  border-style: unset;
  outline: 0;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 4px 0;
  line-height: 2.55555556;
  &::after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background-color: var(--background-color);
    border: inherit;
    border-color: var(--border-color);
    border-radius: inherit;
    transform: translate(-50%, -50%);
    opacity: 0;
  }

  &:active::after {
    opacity: 0.4;
  }

  &.default {
    color: var(--font-color);
    background: #fff;
    border: 2px solid var(--border-color);
  }

  &.primary {
    color: #fff;
    background-color: var(--btn-color);
    // box-shadow: var(--btn-shadow-primary);
  }

  &.secondary {
    background-color: transparent;
    color: var(--font-color-secondary);
    border: 1px solid var(--font-color-secondary);
    &.disabled {
      border: 0;
    }
  }

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

  &.disabled {
    background: var(--btn-color-disabled);
    color: #fff;
    box-shadow: unset;
  }

  &.square {
    border-radius: 12px;
  }

  &.round {
    border-radius: 55px;
  }

  &.rectangle {
    border-radius: 0;
  }

  &.normal {
    width: 570px;
  }

  &.small {
    font-size: 20px;
    width: 170px;
    display: inline-block;
  }
  &.full {
    width: 100%;
  }
  &.ghost {
    background-color: #fff;
    color: var(--color-primary);
    box-shadow: none;
    border: 0;
  }
  &.hollow {
    background-color: #FFF;
    color: var(--color-primary);
    border: 1PX solid var(--color-primary);
  }

  &.webutton {
    display: inline-block;
    margin: 0;
    &.xh-button-small {
      padding: 0;
    }
    &[type="default"] {
      background-color: #fff;
      // color: var(--font-color);
    }
  }
}

#{$xh-prefix}-dot-loading {
  color: currentColor;
  display: inline-block;
}