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

.cds-alternating-layout {
  $this: &;

  &__content {
    & + & {
      margin-block-start: 48px;
    }

    .cds-feature-item__icon {
      margin-block-end: 24px;
    }
  }

  &__item {
    margin-inline: variable.$gap-sm;

    .cds-feature-item__title {
      font-size: var(--font-size-5);
      line-height: abstract.division(token.$line-heights-5, token.$font-size-5);
    }

    .cds-feature-item__description {
      font-size: var(--font-size-2);
    }

    .cds-feature-item__list {
      font-size: var(--font-size-2);
      margin-block-end: 0;
    }

    .cds-feature-item__list-row:nth-child(n + 2) {
      margin-block-start: 16px;
    }

    .cds-feature-item__list-row svg {
      transform: translateY(0);
    }

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

  &__media {
    margin-block-start: 40px;

    img {
      display: block;
    }
  }

  @include abstract.media-bp-up('md') {
    margin-inline: auto;
    max-width: variable.$max-width;

    &__content {
      display: flex;
      gap: 96px;
      padding-inline: (variable.$gap-sm * 2);
      justify-content: space-between;
      align-items: center;

      & + & {
        margin-block-start: 64px;
      }

      &.is-reverse {
        #{$this}__item {
          order: 2;
        }

        #{$this}__media {
          order: 1;
        }
      }
    }

    &__item {
      margin-inline: 0;
      flex: 1;

      .cds-feature-item__title {
        font-size: var(--font-size-6);
        line-height: abstract.division(token.$line-heights-4, token.$font-size-6);
      }

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

      .cds-feature-item__list {
        padding-inline-start: 16px;
      }

      .cds-feature-item__list-row {
        font-size: var(--font-size-3);

        svg {
          width: 28px;
          height: 28px;
        }
      }
    }

    &__media {
      margin-block-start: 0;
      border-radius: 24px;
      overflow: hidden;
      flex: 1;
      max-height: 400px;
    }
  }
}