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

.cds-feature-item {
  // outline: 1px dashed;
  $this: &;

  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;

  &__icon {
    display: block;
  }

  &__media {
    margin-block-end: 24px;

    img {
      vertical-align: top;
    }
  }

  &__title {
    white-space: pre-wrap;
    font-size: var(--font-size-4);
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-2);
  }

  &__description {
    margin-block-start: 8px;
    color: var(--gray-400);
    font-size: var(--font-size-2);
    white-space: pre-wrap;
    line-height: 1.5;
  }

  &__content > :last-child {
    margin-block-end: 0;
  }

  &__list {
    padding-inline-start: 8px;
    margin-block: 32px;
    color: var(--gray-500);
    font-size: var(--font-size-3);
    line-height: abstract.division(token.$line-heights-7, token.$font-size-3);
  }

  &__list-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    word-break: keep-all;

    &:nth-child(n + 2) {
      margin-block-start: 20px;
    }

    & > svg {
      flex: none;
      transform: translateY(2px);
    }
  }

  .cds-btn {
    margin-block-start: 16px;
  }

  // border radius
  &--radius {
    border-radius: 16px;
  }

  // alignment
  // ==========================================

  // transparent
  &--transparent {
    #{$this}__icon {
      margin-block-end: 16px;
    }
  }

  // image, bg, bgImage 있을 경우 사용
  // ==========================================
  &--gap {
    padding: 24px;

    #{$this}__icon {
      margin-block-end: 32px;
    }
  }

  &--offset-icon:not(#{$this}--transparent) {
    @include abstract.relative;

    padding-block: 40px 32px;

    #{$this}__icon {
      @include abstract.absolute($top: 0, $left: 50%);
      transform: translate(-50%, -50%);
    }
  }

  &--center,
  &--offset-icon {
    text-align: center;
  }

  &--space-between {
    display: flex;
    padding: 0;
    gap: 16px;
    border-radius: 0;
  }
}