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

/**
  全局按钮样式
 */

// 实心按钮
.hx-tag {
  @include hxTag($color-heavy, ($height-regular - 8px));
  position: relative;
  background-color: $color-gray-light;
  border: 1px solid $color-gray;
  cursor: default;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  line-height: 1.5;
  font-weight: 600;
  & + & {
    margin-left: $pm-sm;
  }

  &.material {
    box-shadow: $shadow-material;
  }

  &.main    {  @include hxTag($color-main);  }
  &.gray    {  @include hxTag(darken($color-gray-deep, 14%));  }
  &.orange, &.warn  {  @include hxTag($color-orange);  }
  &.red, &.error     {  @include hxTag($color-red);  }
  &.blue, &.info    {  @include hxTag($color-blue);  }
  &.green, &.success   {  @include hxTag($color-green);  }
  &.black, &.fatal   {  @include hxTag($color-black);  }
  &.excel   {  @include hxTag($color-green-excel);  }
  &.pink    {  @include hxTag($color-pink);  }
  &.yellow  {  @include hxTag($color-golden, $color-heavy);  }

  // 尺寸 
  &.sm {
    height: $height-normal/2;
    padding: 0 $pm-sm/2;
    font-size: $font-sm;
    &.round {
      border-radius: $height-normal / 2;
      padding: 0 $pm-sm;
    }
  }
  &.md {
    height: $height-regular - $pm-sm;
    padding: 0 $pm-sm;
    font-size: $font-md;
    &.round {
      border-radius: $height-regular - $pm-sm;
      padding: 0 $pm-xs*3;
    }
  }
  &.bg {
    height: $height-regular;
    padding: 0 $pm-xs*3;
    font-size: $font-bg;
    &.round {
      border-radius: $height-regular;
      padding: 0 $pm-md;
    }
  }
}

// 空心标签
.hx-tag.blank {
  @include hxBlankTag($color-heavy);
  &: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 hxBlankTag(darken($color-gray-deep, 14%));  }
  &.orange, &.warn {  @include hxBlankTag($color-orange);  }
  &.red, &.error {  @include hxBlankTag($color-red);  }
  &.blue, &.info {  @include hxBlankTag($color-blue);  }
  &.green, &.success {  @include hxBlankTag($color-green);  }
  &.excel   {  @include hxBlankTag($color-green-excel);  }
  &.pink    {  @include hxBlankTag($color-pink);  }
  &.yellow  {  @include hxBlankTag($color-golden);  }
}