@use '../../abstract';
@use '../../base/token';

.metrics {
  $border-radius: 16px;
  $this: &;
  text-align: center;
  padding-block: 0;
  background-color: transparent;

  &__header {
    padding: 40px 24px 32px;
    border-radius: $border-radius $border-radius 0 0;
    background-color: var(--gray-50);
  }

  &__tit {
    color: var(--gray-700);
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-2);
    font-size: abstract.rem(token.$font-size-6);
    line-height: token.$line-heights-4 + px;
  }

  &__desc {
    color: var(--gray-400);
    font-size: abstract.rem(token.$font-size-3);
  }

  &__content {
    display: flex;
    flex-direction: column;
    padding: 40px 24px;
    background-color: var(--gray-50);
    border-radius: $border-radius;
  }

  :where(&.has-title) #{$this}__content {
    padding: 0 24px 40px;
    border-radius: 0 0 $border-radius $border-radius;
  }

  // item
  // ====================================
  &__item {
    & > * {
      display: block;

      &:last-child {
        margin-bottom: 0;
      }
    }

    &:nth-child(n + 2) {
      margin-top: 32px;
    }
  } // item

  &__num {
    margin-bottom: 12px;
    color: var(--secondary-gray-blue-450);
    line-height: 1;
    font-size: abstract.rem(token.$font-size-8);
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-2);

    &-desc {
      color: var(--gray-700);
      font-size: abstract.rem(token.$font-size-3);
    }
  }

  &.has-title {
    #{$this}__tit {
      margin-bottom: 16px;
    }
  }

  // TODO: 추후 갈아 엎기
  // theme
  &--dark {
    color: var(--base-white);

    #{$this}__tit {
      color: inherit;
    }

    #{$this}__desc {
      color: var(--gray-200);
    }

    #{$this}__content {
      background-color: var(--secondary-gray-blue-700);
    }

    #{$this}__num {
      color: inherit;
    }

    #{$this}__num-desc {
      color: var(--gray-200);
    }

    &.has-title {
      #{$this}__header {
        background-color: var(--secondary-gray-blue-700);
      }
    }
  }

  @include abstract.media-bp-up('md') {
    padding-block-start: 96px;

    &__header {
      padding-block: 0;
      margin-bottom: 64px;
      background: none;
    }

    &__tit {
      font-size: abstract.rem(token.$font-size-7);
      line-height: token.$line-heights-3 + px;
    }

    &-desc {
      font-size: abstract.rem(token.$font-size-4);
    }

    &__content {
      padding: 64px;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      gap: 32px;
      border-radius: $border-radius;
    }

    &__item {
      flex: 1;

      &:nth-child(n + 2) {
        margin-top: 0;
      }
    }

    &__num {
      font-size: token.$font-size-9;
    }

    &.has-title #{$this}__tit {
      margin-bottom: 20px;
    }

    &--dark {
      &.has-title {
        #{$this}__header {
          background-color: transparent;
        }

        #{$this}__tit {
          color: var(--gray-700);
        }

        #{$this}__desc {
          color: var(--gray-400);
        }

        #{$this}__content {
          border-top-left-radius: $border-radius;
          border-top-right-radius: $border-radius;
        }
      }

      #{$this}__content {
        padding-top: 64px;
      }
    }
  } // md
}