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

.cds-gray-card-badge {
  $discount-badge: cds-badge;
  $month-tab: cds-button-primary;

  max-width: 1280px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 64px;

  &__header {
    padding-block-end: 64px;
  }

  &__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 0 16px;
  }

  &__footer {
    display: none;
  }

  .#{$discount-badge} {
    display: none;
  }

  .#{$month-tab} {
    margin-top: 32px;
  }

  @include abstract.media-bp-up('ex') {
    padding-bottom: 0;

    &__header {
      padding-block-end: 96px;
    }

    &__content {
      flex-direction: row;
      align-items: stretch;
      gap: 32px;
      padding: 0 32px;
    }

    &__footer {
      display: flex;
      justify-content: center;
    }

    &--detail-btn {
      display: inherit;
      margin-top: 64px;
      margin-bottom: 96px;
    }

    &__mo-pricing-table-modal {
      display: none;
    }

    .#{$discount-badge} {
      display: block;
    }

    .#{$month-tab} {
      margin-top: 40px;
    }
  }
}