@import './common/variable.scss';
@import './common/color.scss';

.jd-button {
  display: inline-block;
  font-size: 14px;
  line-height: 30px;
  text-decoration: none!important;
  border-radius: 50px;
  border: 1px solid $button-fill;
  text-align: center;
  &.fill {
    background-color: $button-fill;
    color: $white;
  }
  &.text {
    color: $button-fill;
    border-width: 0;
    &:hover {
      background-color: initial;
      border-width: 0;
      color: $button-fill;
    }
  }
  &.blank {
    color: $button-fill;
  }
  &:hover {
    background-color: $button-hover;
    border-color: $button-hover;
    color: $white;
  }
  &.disabled {
    background-color: $gray-12;
    border-color: $gray-12;
    color: $white;
    cursor: not-allowed;
  }
  &.aibank {
    border: 1px solid $aibank-blue;
    &.fill {
      background-color: $aibank-blue;
      color: $aibank-blue-text;
    }
    &.text {
      border-width: 0;
      color: $aibank-blue;
      &:hover {
        background-color: transparent;
        color: $aibank-blue;
      }
    }
    &.blank {
      color: $aibank-blue;
    }
    &:hover {
      background-color: $aibank-blue-hover;
      border-color: $aibank-blue-hover;
      color: $aibank-blue-text;
    }
    &.disabled {
      background-color: $aibank-blue-disabled;
      border-color: $aibank-blue-disabled;
      color: $aibank-blue-text;
      cursor: not-allowed;
    }
  }
}