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

.cds-check-items {
  // @include abstract.debug();

  padding-left: 8px;

  @include abstract.media-bp-up('md') {
    padding-left: 16px;
  }
}

.cds-check-item {
  display: flex;
  gap: 12px;

  &__content:where(:nth-child(n + 2)) {
    margin-top: 16px;
  }

  &__text {
    white-space: break-spaces;
    word-break: keep-all;
    color: var(--gray-500);
    font-size: token.$font-size-2;
  }

  svg {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
  }

  @include abstract.media-bp-up('md') {
    &__content:where(:nth-child(n + 2)) {
      margin-top: 20px;
    }

    &__text {
      @include abstract.font-18-line-height-28;
    }

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