@root-entry-name: 'default';

@import (reference) '~antd/es/style/themes/index.less';

@pro-card-statistic-prefix-cls: ~'@{ant-prefix}-pro-card-statistic';

.@{pro-card-statistic-prefix-cls} {
  display: flex;
  font-size: @font-size-base;

  & + & {
    margin-top: 4px;
  }

  &-tip {
    margin-left: 4px;
  }

  &-wrapper {
    display: flex;
    width: 100%;
  }

  &-icon {
    margin-right: 16px;
  }

  &-trend-icon {
    width: 0;
    height: 0;
    border-right: 3.5px solid transparent;
    border-bottom: 9px solid #000;
    border-left: 3.5px solid transparent;

    &-up {
      transform: rotate(0deg);
    }

    &-down {
      transform: rotate(180deg);
    }
  }

  &-content {
    width: 100%;
  }

  &-description {
    width: 100%;
  }

  .@{ant-prefix}-statistic-title {
    color: @text-color;
  }

  &-layout-inline {
    display: inline-flex;
    color: @text-color-secondary;

    .@{ant-prefix}-statistic-title {
      margin-right: 6px;
      margin-bottom: 0;
    }

    .@{ant-prefix}-statistic-content {
      color: @text-color-secondary;
    }

    .@{ant-prefix}-statistic-title,
    .@{ant-prefix}-statistic-content,
    .@{ant-prefix}-statistic-content-suffix,
    .@{ant-prefix}-statistic-content-prefix,
    .@{ant-prefix}-statistic-content-value-decimal {
      font-size: @font-size-sm;
    }
  }

  &-layout-horizontal {
    display: flex;
    justify-content: space-between;

    .@{ant-prefix}-statistic-title {
      margin-bottom: 0;
    }

    .@{ant-prefix}-statistic-content-value {
      font-weight: 500;
    }

    .@{ant-prefix}-statistic-title,
    .@{ant-prefix}-statistic-content,
    .@{ant-prefix}-statistic-content-suffix,
    .@{ant-prefix}-statistic-content-prefix,
    .@{ant-prefix}-statistic-content-value-decimal {
      font-size: @font-size-base;
    }
  }

  &-trend-up {
    .@{ant-prefix}-statistic-content {
      color: #f5222d;
      .@{pro-card-statistic-prefix-cls}-trend-icon {
        border-bottom-color: #f5222d;
      }
    }
  }

  &-trend-down {
    .@{ant-prefix}-statistic-content {
      color: #389e0d;
      .@{pro-card-statistic-prefix-cls}-trend-icon {
        border-bottom-color: #52c41a;
      }
    }
  }
}