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

.cds-header-section {
  $this: &;
  padding-block: 64px;
  text-align: start;

  &__inner {
    margin-inline: auto;
    padding-inline: variable.$gap-sm;
    width: min(100%, variable.$max-width);
  }

  &__sub-header {
    margin-block-end: 12px;
    color: var(--gray-300);
    font-size: abstract.rem(token.$font-size-1);
    white-space: pre-wrap;
    line-height: abstract.division(token.$line-heights-9, token.$font-size-1);
  }

  header {
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-2);
  }

  &__header {
    color: var(--gray-700);
    white-space: pre-wrap;
    font-size: var(--font-size-7); // 36
    line-height: abstract.division(token.$line-heights-3, token.$font-size-7);
  }

  &__text {
    margin-top: 16px;
    color: var(--gray-500);
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-0);
    white-space: pre-wrap;
    font-size: var(--font-size-4); // 20
  }

  &__more {
    width: 100%;
  }

  &__buttons {
    margin-top: 32px;
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-direction: column-reverse;
  }

  // md size
  // sub heading 상관 없이 md 사이즈가 필요 하여 추가
  // ==========================================
  &--md #{$this}__header {
    font-size: var(--font-size-6); // 30
    // 38 / 30
    line-height: abstract.division(token.$line-heights-4, token.$font-size-6);
  }

  &--sm #{$this}__header {
    font-size: var(--font-size-5); // 24
    // 32 / 24
    line-height: abstract.division(token.$line-heights-6, token.$font-size-5); //32
  }

  &.has-sub-heading {
    padding-block-end: 48px;
  }

  //size
  &--md,
  &--sm {
    #{$this}__text {
      font-size: var(--font-size-3);
      line-height: abstract.division(token.$line-heights-7, token.$font-size-3);
    }

    & {
      padding-block-end: 48px;
    }
  }

  @include abstract.media-bp-up('md') {
    padding-block: 96px;

    &__inner {
      padding-inline: variable.$gap-sm * 2;
    }

    &__sub-header {
      font-size: token.$font-size-2;
      line-height: abstract.division(token.$line-heights-8, token.$font-size-2);
    }

    &__header {
      font-size: var(--font-size-8);
      line-height: abstract.division(token.$line-heights-2, token.$font-size-8);
      text-align: inherit;
    }

    &__text {
      margin-top: 24px;
    }

    &__more {
      width: auto;
    }

    &__buttons {
      display: block;
      margin-block-start: 40px;

      .cds-btn + .cds-btn {
        margin-inline-start: 12px;
      }
    }

    &.has-sub-heading {
      padding-block-end: 64px;
    }

    // size
    &--md {
      padding-block-end: 64px;

      #{$this}__header {
        font-size: token.$font-size-7;
        line-height: abstract.division(token.$line-heights-3, token.$font-size-7);
      }

      #{$this}__text {
        font-size: var(--font-size-3);
        line-height: abstract.division(token.$line-heights-7, token.$font-size-3);
        margin-block-start: 20px;
      }
    }

    &--sm {
      padding-block-end: 64px;

      #{$this}__header {
        font-size: token.$font-size-6;
        line-height: abstract.division(token.$line-heights-4, token.$font-size-6);
      }

      #{$this}__text {
        font-size: var(--font-size-3);
        line-height: abstract.division(token.$line-heights-7, token.$font-size-3);
        margin-block-start: 20px;
      }
    }
  } // md

  & > *:last-child {
    margin-bottom: 0;
  }

  // align
  // left(default), space-between
  // pc 버전 (left, space-between은 pc만 변경)
  // ==========================================

  &--center {
    text-align: center;
  }

  @include abstract.media-bp-up('md') {
    &--space-between {
      #{$this}__inner {
        @include abstract.relative;
      }

      text-align: start;

      #{$this}__buttons {
        @include abstract.absolute($top: 0, $right: variable.$gap-sm * 2);
        margin-block-start: 0;
      }
    }
  } // align media query

  // theme
  // ==========================================
  @at-root .dark {
    &#{$this} {
      background-color: var(--secondary-gray-blue-700);
      color: var(--base-white);

      #{$this}__sub-header,
      #{$this}__header {
        color: inherit;
      }

      #{$this}__text {
        color: var(--gray-200);
      }
    }
  }
}