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

.cds-feature-list {
  --column-count: 3;
  $this: &;

  .swiper-slide {
    height: auto;
  }

  &__inner {
    padding-inline: variable.$gap-sm;
    display: grid;
    gap: 40px;

    &.carousel {
      display: block;
    }
  }

  &.has-bg #{$this}__inner {
    gap: 24px;
  }

  &.has-bg.offset-icon-alignment #{$this}__inner {
    gap: 64px;
  }

  .cds-feature-item__title {
    font-size: var(--font-size-3);
  }

  .cds-feature-item__description {
    margin-block-start: 4px;
    font-size: var(--font-size-2);
  }

  .cds-feature-item__list {
    margin-block-start: 32px;
    font-size: var(--font-size-2);
    line-height: abstract.division(token.$line-heights-8, token.$font-size-2);
  }

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

  &__item [class*='btn--link'] {
    margin-block-start: 16px;
    text-align: start;
  }

  .cds-carousel-layout__arrows {
    padding: 0;
  }

  @include abstract.media-bp-up('md') {
    &__inner {
      max-width: variable.$max-width;
      margin-inline: auto;
      padding-inline: variable.$gap-sm * 2;
      grid-template-columns: repeat(var(--column-count), 1fr);
      gap: 32px;
    }

    &.has-bg #{$this}__inner {
      gap: 32px;
    }

    .cds-feature-item--gap .cds-feature-item__icon {
      margin-block-end: 48px;
    }

    .cds-feature-item__title {
      font-size: var(--font-size-4);
    }

    .cds-feature-item__description {
      margin-block-start: 8px;
    }

    &__item .cds-feature-item__list {
      font-size: var(--font-size-3);
      line-height: abstract.division(token.$line-heights-7, token.$font-size-3);
    }
  }

  &.dark {
    background-color: var(--secondary-gray-blue-700);

    .cds-feature-item--transparent {
      color: var(--base-white);

      .cds-feature-item__description,
      .cds-feature-item__list,
      [class*='link'] {
        color: inherit;
      }
    }
  }
}