@use "../../../styles/mixins.scss";

.statistics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  color: var(--hi-primary);
  margin: 0.5rem 0;

  @include mixins.respond-below(lg) {
    grid-template-columns: repeat(2, 1fr);
  }

  @include mixins.respond-below(md) {
    grid-template-columns: 1fr;
  }
}

.statistic {
  display: flex;
  align-items: center;
  padding: 1.25rem !important;
  margin-bottom: 0 !important;
  height: 100%;

  .leftPanel {
    flex: 1;
    display: grid;
    grid-template-rows: auto auto;
    min-height: 65px;
    gap: 2px;

    .number {
      font-size: 1.75rem;
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1.2;
      align-self: end;

      @include mixins.respond-below(md) {
        font-size: 1.5rem;
      }
    }

    .description {
      font-size: 0.85rem;
      color: var(--hi-color-gray-dark);
      font-weight: 400;
      align-self: start;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
  }

  .rightPanel {
    margin-left: 1rem;
    align-self: flex-start;

    .icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;

      @include mixins.respond-below(md) {
        width: 36px;
        height: 36px;
        border-radius: 10px;
      }
    }
  }

  @include mixins.respond-below(sm) {
    padding: 1rem !important;

    .leftPanel {
      min-height: 55px;

      .number {
        font-size: 1.25rem;
      }

      .description {
        font-size: 0.9125rem;
      }
    }
  }
}
