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

// NOTE: 현재 .cds-cta-section로 인한 특이성 때문에 리팩토링 전까지 아래와같이 처리함.
.cds-cta-section.video-mockup {
  color: unset;
  padding: 64px 0;

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

.video-mockup {
  &__container {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 0 16px;
    margin-left: auto;
    margin-right: auto;
  }

  &__content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    word-break: keep-all;
    width: 100%;
  }

  &__content-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    white-space: pre-wrap;
    text-align: left;
  }

  &__content-heading {
    color: var(--gray-700);
    font-size: token.$font-size-6;
  }

  &__content-supporting-text {
    @include abstract.font-18-line-height-28;
    color: var(--gray-400);
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-0);
  }

  &__video-player {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  @include abstract.media-bp-up('md') {
    .cds-btn {
      width: fit-content;
    }

    &__container {
      flex-direction: row;
      gap: 64px;
      padding: 0 32px;
      max-width: 1280px;
    }

    &__content {
      gap: 40px;
    }

    &__content-header {
      gap: 24px;
    }

    &__content-heading.cds-cta-section__title {
      margin-block-end: 0;
      font-size: token.$font-size-7;
      line-height: token.$line-heights-3 + px;
    }
  }
}

[class*='--dark'] .video-mockup__content-heading {
  color: var(--base-white);
}

[class*='--dark'] .video-mockup__content-supporting-text {
  color: var(--secondary-gray-blue-200);
}