@use "../../../styles/base/utilities";

[data-fs-banner-text] {
  // --------------------------------------------------------
  // Design Tokens for Banner Text
  // --------------------------------------------------------

  // Default properties
  --fs-banner-text-padding-mobile                : var(--fs-spacing-6) 5%;
  --fs-banner-text-padding-desktop               : var(--fs-spacing-9) 10%;
  --fs-banner-text-border-radius                 : var(--fs-border-radius);

  // Button Link
  --fs-banner-text-button-link-min-width         : 11.25rem;
  --fs-banner-text-button-link-margin-top        : var(--fs-spacing-6);

  // Title
  --fs-banner-text-title-size                    : var(--fs-text-size-lead);
  --fs-banner-text-title-weight                  : var(--fs-text-weight-bold);
  --fs-banner-text-title-line-height             : 1.2;

  // Primary
  --fs-banner-text-primary-title-size            : var(--fs-text-size-title-page);

  // Secondary
  --fs-banner-text-secondary-title-size          : var(--fs-text-size-4);
  --fs-banner-text-secondary-caption-size        : var(--fs-text-size-base);
  --fs-banner-text-secondary-caption-weight      : var(--fs-text-weight-regular);
  --fs-banner-text-secondary-caption-line-height : 1.5;

  // Main
  --fs-banner-text-main-bkg-color                : var(--fs-color-primary-bkg);
  --fs-banner-text-main-text-color               : var(--fs-color-primary-text);

  // Light
  --fs-banner-text-light-bkg-color               : var(--fs-color-secondary-bkg-light);
  --fs-banner-text-light-text-color              : var(--fs-color-text-display);

  // Accent
  --fs-banner-text-accent-bkg-color              : var(--fs-color-highlighted-bkg);
  --fs-banner-text-accent-text-color             : var(--fs-banner-text-light-text-color);

  // --------------------------------------------------------
  // Structural Styles
  // --------------------------------------------------------

  height: 100%;
  text-align: center;
  border-radius: var(--fs-banner-text-border-radius);

  [data-fs-banner-text-content] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: var(--fs-banner-text-padding-mobile);

    @include utilities.media(">=notebook") {
      padding: var(--fs-banner-text-padding-desktop);
    }
  }

  [data-fs-banner-text-link] {
    min-width: var(--fs-banner-text-button-link-min-width);
    margin: var(--fs-banner-text-button-link-margin-top) auto 0;
  }

  // --------------------------------------------------------
  // Variants Styles
  // --------------------------------------------------------

  &[data-fs-banner-text-variant="primary"] {
    h2 {
      font-size: var(--fs-banner-text-title-size);
      font-weight: var(--fs-banner-text-title-weight);
      line-height: var(--fs-banner-text-title-line-height);

      @include utilities.media(">=notebook") {
        display: block;
        font-size: var(--fs-banner-text-primary-title-size);
      }
    }
  }

  &[data-fs-banner-text-variant="secondary"] {
    h2 {
      margin-bottom: var(--fs-spacing-2);
      font-size: var(--fs-banner-text-secondary-title-size);
      font-weight: var(--fs-banner-text-title-weight);
      line-height: var(--fs-banner-text-title-line-height);

      @include utilities.media(">=notebook") { display: block; }
    }

    p {
      font-size: var(--fs-banner-text-secondary-caption-size);
      font-weight: var(--fs-banner-text-secondary-caption-weight);
      line-height: var(--fs-banner-text-secondary-caption-line-height);
    }
  }

  &[data-fs-banner-text-color-variant="main"] {
    background-color: var(--fs-banner-text-main-bkg-color);

    [data-fs-banner-text-heading] {
      color: var(--fs-banner-text-main-text-color);
    }
  }

  &[data-fs-banner-text-color-variant="light"] {
    background-color: var(--fs-banner-text-light-bkg-color);

    [data-fs-banner-text-heading] {
      color: var(--fs-banner-text-light-text-color);
    }
  }

  &[data-fs-banner-text-color-variant="accent"] {
    background-color: var(--fs-banner-text-accent-bkg-color);

    [data-fs-banner-text-heading] {
      color: var(--fs-banner-text-accent-text-color);
    }
  }
}