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

.cds-badge-offset {
  $this: &;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 343px;
  background-color: var(--gray-50);

  del {
    color: var(--gray-300);
    text-decoration: line-through;
  }

  &__header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 24px 0 24px;
    white-space: pre-line;
    word-break: keep-all;

    #{$this}__heading {
      @include abstract.font-18-line-height-28;
      display: flex;
      justify-content: space-between;
      color: var(--gray-500);
      font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-2);
    }

    #{$this}__heading-text {
      font-size: token.$font-size-3;
      text-align: unset;
    }

    #{$this}__price-supporting {
      font-size: token.$font-size-2;
      color: var(--gray-300);
      font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-1);
      line-height: token.$line-heights-7 + px;
    }

    #{$this}__price {
      color: var(--gray-700);
      font-size: token.$font-size-7;
      font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-2);
      line-height: token.$line-heights-3 + px;
      margin-right: 4px;
    }

    #{$this}__per,
    #{$this}__counseling {
      color: var(--gray-400);
      font-size: var(--font-size-2);
      font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-1);
      vertical-align: bottom;
    }
  }

  &__content {
    display: flex;
    flex-direction: column;
    padding: 40px 24px 32px 24px;
    color: var(--gray-500);
    line-height: token.$line-heights-7 + px;

    .cds-btn {
      order: 2;
      margin-bottom: 0;
      margin-top: 12px;

      &:first-child {
        margin-top: 40px;
      }
    }

    #{$this}__mo-pricing-table-btn {
      display: block;
    }

    #{$this}__check-items {
      order: 1;

      &__title {
        margin-bottom: 12px;
        font-size: token.$font-size-2;
        font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-1);

        &:nth-of-type(n + 2) {
          margin-top: 16px;
        }
      }

      .cds-check-items {
        padding-left: 0;
      }

      .cds-check-item {
        gap: 4px;
        align-items: center;

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

      .cds-check-item:nth-child(n + 2) {
        margin-top: 8px;
      }

      .cds-check-item__text {
        font-size: token.$font-size-2;
        line-height: #{token.$line-heights-8}px;
      }
    }

    #{$this}__check-items__title {
      display: block;
    }
  }

  @include abstract.media-bp-up('ex') {
    flex: 1;
    width: auto;

    &__header {
      padding: 32px 32px 0 32px;
      height: 154px;
    }

    &__content {
      padding: 32px;

      #{$this}-check-items {
        order: 2;
      }

      #{$this}__mo-pricing-table-btn {
        display: none;
      }

      .cds-btn {
        order: 1;
        margin-top: 0;
        margin-bottom: 28px;

        &:first-child {
          margin-top: 0;
        }
      }
    }
  }
}