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

$badge-hight: 25px;
$badge-width: fit-content;
$border: 1px solid var(--gray-200);

.cds-dual-check-items {
  display: flex;
  flex-direction: column;
  width: max(343px, 100%);
  border: $border;
  border-radius: 16px;

  &__header {
    // @include abstract.debug();
    border-bottom: $border;
    padding: 24px 24px 32px 24px;
  }

  &__heading-and-price {
    // @include abstract.debug(blue);
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  &__heading-and-supporting-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    order: 2;
  }

  &__heading {
    text-align: left;
    font-size: token.$font-size-4;
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-2);
  }

  &__sub-heading {
    color: var(--gray-400);
    font-size: token.$font-size-2;
  }

  &__supporting-text {
    color: var(--gray-500);
  }

  &__badge-supporting-text-wrap {
    margin-bottom: 8px;
  }

  &__badge {
    height: $badge-hight;
    width: $badge-width;
    margin-right: 8px;
  }

  &__price-supporting-text {
    color: var(--gray-300);
  }

  del {
    color: var(--gray-300);
  }

  &__price {
    font-size: token.$font-size-7;
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-2);
    margin-right: 4px;
  }

  &__period {
    color: var(--gray-400);
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-1);
  }

  &__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    border-bottom: $border;
    padding: 32px 24px 40px 24px;
  }

  &__text-and-supporting-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  &__text {
    color: var(--gray-700);
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-2);
  }

  &__supporting-text {
    color: var(--gray-500);
  }

  &__check-items-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  &__check-items {
    padding-left: 0;

    :where(.cds-check-item__content) {
      align-items: center;
      gap: 4px;
    }

    :where(.cds-check-item__content:nth-child(n + 2)) {
      margin-top: 16px;
    }

    :where(.cds-check-item__text) {
      color: var(--gray-500);
      font-size: token.$font-size-2;
      line-height: inherit;
    }

    svg {
      flex: none;
      width: 18px;
      height: 18px;
    }
  }

  &__footer {
    padding: 24px 24px 32px 24px;
  }

  &__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  @include abstract.media-bp-up('md') {
    width: min(576px, 100%);

    &__header {
      padding: 32px 32px 24px 32px;
    }

    &__heading-and-price {
      flex-direction: row;
      gap: 32px;
    }

    &__heading-and-supporting-text {
      order: 1;
    }

    &__heading {
      font-size: token.$font-size-5;
      line-height: token.$line-heights-5 + px;
    }

    &__sub-heading {
      max-width: 200px;
      color: var(--gray-400);
      font-size: token.$font-size-2;
    }

    &__badge-supporting-text-wrap {
      margin-bottom: 5px;
    }

    &__price-wrap {
      order: 2;
    }

    &__price {
      font-size: token.$font-size-8;
      line-height: token.$line-heights-2 + px;
    }

    &__period {
      padding-bottom: 8px;
    }

    &__content {
      padding: 32px 32px 40px 32px;
    }

    &__check-items-wrap {
      flex-direction: row;
      gap: 32px;
    }

    &__check-items {
      flex: 1;
    }

    &__footer {
      padding: 32px;
    }
  }
}