@import '../../style/themes/default.less';
@import '../../style/themes/variable.less';

@component-prefix-cls: ~'@{qn-prefix}-status-card';

.@{component-prefix-cls} {
  width: 100%;
  padding: 12px 16px;
  background-color: @status-card-normal-bg;
  border-radius: 4px;

  &-normal {
    background-color: @status-card-normal-bg;
  }

  &-waitting {
    background-color: @status-card-waitting-bg;
  }

  &-finished {
    background-color: @status-card-finished-bg;
  }

  &-processing {
    background-color: @status-card-processing-bg;
  }

  &-canceled {
    background-color: @status-card-canceled-bg;
  }

  &-urgency {
    background-color: @status-card-urgency-bg;
  }

  &-high {
    background-color: @status-card-high-bg;
  }

  &-medium {
    background-color: @status-card-medium-bg;
  }

  &-low {
    background-color: @status-card-low-bg;
  }

  &-title {
    height: 18px;
    margin-bottom: 4px;
    color: #18191a;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
  }

  &-content {
    height: 22px;
    color: @status-card-normal-color;
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    text-align: center;

    &-normal {
      color: @status-card-normal-color;
    }

    &-waitting {
      color: @status-card-waitting-color;
    }

    &-finished {
      color: @status-card-finished-color;
    }

    &-processing {
      color: @status-card-processing-color;
    }

    &-canceled {
      color: @status-card-canceled-color;
    }

    &-urgency {
      color: @status-card-urgency-color;
    }

    &-high {
      color: @status-card-high-color;
    }

    &-medium {
      color: @status-card-medium-color;
    }

    &-low {
      color: @status-card-low-color;
    }
  }

  &-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-radius: 8px;

    &-normal {
      display: none;
    }

    &-waitting {
      background-color: @status-card-waitting-color;
    }

    &-finished {
      background-color: @status-card-finished-color;
    }

    &-processing {
      background-color: @status-card-processing-color;
    }

    &-canceled {
      background-color: @status-card-canceled-color;
    }

    &-urgency {
      background-color: @status-card-urgency-color;
    }

    &-high {
      background-color: @status-card-high-color;
    }

    &-medium {
      background-color: @status-card-medium-color;
    }

    &-low {
      background-color: @status-card-low-color;
    }
  }
}