@use '@/assets/css/constants' as constants;

[data-component=component-statistics-card] {
  .statistics-card {
    padding: 20px;
    gap: 20px;

    > .head {
      align-items: center;
      gap: 5px;
      color: constants.$main-color;

      .icon {
        font-size: constants.$SIZE_ICON_MD;
        flex: 0 0 auto;
      }

      .title {
        display: flex;
        font-size: 1.2em;
      }

      :nth-child(n+3) {
        flex: 0 0 auto;
        color: constants.$font-main-color;
      }
    }

    .card-content {
      font-size: 1.1em;
      padding: 0 10px;
      gap: 10px;

      .key, .value-percent {
        flex: 0 0 auto;
        color: constants.$font-main-color;
      }

      .value {
        color: constants.$font-secondary-color;
        overflow: hidden;

        > * {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .value-chart {
        justify-content: space-around;
        width: 0;

        > div {
          max-height: 12px;
          height: 12px;

          > * {
            transform: translateY(1px);
          }
        }
      }

      .value-percent {
        text-align: right;
      }

      .big-chart {
        width: 0;
        height: 400px;
      }

      > * {
        gap: 5px;
      }
    }
  }
}