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

/**
    全局按钮样式
 */

// 实心按钮
.hx-button {
  @include hxButton(white);
  position: relative;
  color: $color-heavy;
  border: 1px solid $color-gray;
  &:hover {
    background-color: #fafafa;
  }
  &:active {
    background-color: #f6f6f6;
  }
  &:disabled, &.disabled {
    background-color: darken($color-gray, 10%)!important;
    cursor: not-allowed;
    color: $color-heavy;
    border: none!important;
    &:hover {
      filter: brightness(100%);
      background-color: darken($color-gray, 10%)!important;
    }
  }
  &.material {
    box-shadow: $shadow-material;
  }
  &.loading {
    @include loading($height-regular - 10px, $height-regular - 10px, 5px, $pm-md);
    border: 1px solid $color-gray!important;
  }
  &.main    {  @include hxButton($color-main);  }
  &.gray    {  @include hxButton(darken($color-gray-deep, 14%));  }
  &.orange, &.warn {  @include hxButton($color-orange);  }
  &.red, &.error {  @include hxButton($color-red);  }
  &.blue, &.info {  @include hxButton($color-blue);  }
  &.green, &.success {  @include hxButton($color-green);  }
  &.excel   {  @include hxButton($color-green-excel);  }
  &.pink    {  @include hxButton($color-pink);  }
  &.black, &.fatal    {  @include hxButton($color-black);  }
  &.yellow  {  @include hxButton($color-golden, $color-heavy);  }
}

// 空心按钮
.hx-button.blank {
  @include hxBlankButton($color-main);
  &:disabled, &.disabled {
    background-color: darken($color-gray, 5%)!important;
    cursor: not-allowed;
    border: 1px solid darken($color-gray, 5%)!important;
    color: $color-gray-deep!important;
    &:hover {
      background-color: darken($color-gray, 5%)!important;
    }
  }
  &.gray    {  @include hxBlankButton(darken($color-gray-deep, 14%));  }
  &.orange, &.warn  {  @include hxBlankButton($color-orange);  }
  &.red, &.error     {  @include hxBlankButton($color-red);  }
  &.blue, &.info    {  @include hxBlankButton($color-blue);  }
  &.green, &.success   {  @include hxBlankButton($color-green);  }
  &.excel   {  @include hxBlankButton($color-green-excel);  }
  &.pink    {  @include hxBlankButton($color-pink);  }
  &.yellow  {  @include hxBlankButton($color-golden);  }
  &.black, &.fatal  {  @include hxBlankButton($color-black);  }
}

.hx-button.text {
  @include hxTextButton($color-main);
  &:disabled, &.disabled {
    background-color: darken($color-gray, 5%)!important;
    cursor: not-allowed;
    border: 1px solid darken($color-gray, 5%)!important;
    color: $color-gray-deep!important;
    &:hover {
      background-color: $color-gray-light!important;
    }
  }
  &.gray    {  @include hxTextButton(darken($color-gray-deep, 14%));  }
  &.orange, &.warn {  @include hxTextButton($color-orange);  }
  &.red, &.error {  @include hxTextButton($color-red);  }
  &.blue, &.info {  @include hxTextButton($color-blue);  }
  &.green, &.success {  @include hxTextButton($color-green);  }
  &.excel   {  @include hxTextButton($color-green-excel);  }
  &.pink    {  @include hxTextButton($color-pink);  }
  &.yellow  {  @include hxTextButton($color-golden);  }
}

// 按钮尺寸
.hx-button.sm {
  height: $height-navbar/2;
  font-size: $font-sm;
}
.hx-button.bg {
  height: $height-normal;
  font-size: $font-bg;
}


@media screen and (max-width: 640px) {
  .hx-button {
    margin-bottom: $pm-sm;
  }
}