@use 'sass:map';
@use '../../base/variable';
@use '../../base/token';
@use '../../abstract';

$hero-theme: (
  'dark': (
    'bg': var(--secondary-gray-blue-700),
    'heading': var(--base-white),
    'headingSupportText': var(--secondary-gray-blue-100),
  ),
  'default': (
    'bg': var(--base-white),
  ),
);

$header-section: '.cds-header-section'; // hero header 공통

.cds-hero {
  // @include abstract.debug();
  padding: 64px 16px;
  max-width: variable.$max-width-hero;
  margin-left: auto;
  margin-right: auto;

  #{$header-section} {
    padding: 0;
  }

  #{$header-section} ~ * {
    margin-top: 48px;
  }

  #{$header-section}__text {
    color: var(--gray-400);
  }

  &__content {
    margin-bottom: 64px;
  }

  &__badge {
    margin-bottom: 16px;
  }

  &__title {
    margin-bottom: 16px;
    color: var(--gray-700);
    font-size: abstract.rem(token.$font-size-7);
    line-height: token.$line-heights-3 + px;
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-2);
    text-align: left;
    white-space: pre-wrap;

    br {
      display: none;
    }
  }

  &__text {
    margin-bottom: 32px;
    color: var(--gray-400);
    font-size: abstract.rem(token.$font-size-3);
    white-space: pre-wrap;
  }

  // theme - header section
  @each $theme, $data in $hero-theme {
    &--#{$theme} {
      background-color: map.get($data, 'bg');

      @if $theme == 'dark' {
        #{$header-section}__header {
          color: map.get($data, 'heading');
        }

        #{$header-section}__text {
          color: map.get($data, 'headingSupportText');
        }
      }
    }
  }

  // pc
  @include abstract.media-bp-up('md') {
    padding: 0;

    #{$header-section}__header {
      font-size: token.$font-size-9;
      line-height: token.$line-heights-1 + px;
    }

    &__title {
      margin-bottom: 24px;
      line-height: token.$line-heights-1 + px;
      font-size: abstract.rem(token.$font-size-9);
    } // tit

    &__text {
      margin-bottom: 48px;
      font-size: abstract.rem(token.$font-size-4);
    }

    &__img img {
      height: 100%;
    }
  } // md

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