@import (reference) '../extend.less';
.bs-list {
  &-card {
    background-color: @component-background;
    box-shadow: inset 0 0 0 @border-width-base @border-color-split;
  }
  &-title {
    line-height: 32px;

    height: 32px;
    padding: 0 @padding-lg 0 @padding-md;

    color: @white;
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
    background: linear-gradient(90deg, @primary-color, lighten(@primary-color, 20%));
  }
  &-status {
    line-height: 32px;

    position: relative;

    height: 32px;
    padding: 0 @padding-md 0 @padding-xs;

    color: @white;
    &::before {
      position: absolute;
      top: 0;
      left: -20px;

      content: '';
      pointer-events: none;

      border-top: 32px solid;
      border-left: 20px solid transparent;
    }
    &.success {
      background-color: @success-color;
      &::before {
        border-top-color: @success-color;
      }
    }
    &.warning {
      background-color: @warning-color;
      &::before {
        border-top-color: @warning-color;
      }
    }
    &.error {
      background-color: @error-color;
      &::before {
        border-top-color: @error-color;
      }
    }
  }
  &-body {
    padding: @padding-md;
  }
  &-content {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;

    gap: 8px;
  }
  &-icon {
    font-size: @font-size-lg + 4px;

    color: #d6e0e7;
  }
  &-text {
    overflow: hidden;
    flex: 1;

    white-space: nowrap;
    text-overflow: ellipsis;

    color: fade(@black, 50%);
  }
}
