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

[data-fs-newsletter] {
  // --------------------------------------------------------
  // Design Tokens for Newsletter
  // --------------------------------------------------------

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

  // Title
  --fs-newsletter-title-size                        : var(--fs-text-size-title-section);
  --fs-newsletter-title-weight                      : var(--fs-text-weight-bold);

  // Icon
  --fs-newsletter-icon-size                         : var(--fs-spacing-5);

  // Card
  --fs-newsletter-card-border-radius                : var(--fs-border-radius);

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

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

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

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

  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: var(--fs-newsletter-border-radius);

  [data-fs-newsletter-form] {
    display: flex;
    flex-direction: column;
    row-gap: var(--fs-spacing-4);
    padding: var(--fs-newsletter-padding-mobile);

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

  [data-fs-newsletter-content] {
    display: flex;
    flex-direction: column;
    row-gap: var(--fs-spacing-3);

    [data-fs-button] {
      width: 100%;
      margin-top: var(--fs-spacing-3);
    }
  }

  [data-fs-newsletter-header] {
    display: grid;
    row-gap: var(--fs-spacing-2);
    line-height: 1.5;
    text-align: center;

    @include utilities.media(">=notebook") {
      align-content: flex-start;
      text-align: left;
    }
  }

  [data-fs-newsletter-header-title] {
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--fs-spacing-1);
    column-gap: var(--fs-spacing-1);
    align-items: center;
    justify-content: center;
    font-size: var(--fs-newsletter-title-size);
    font-weight: var(--fs-newsletter-title-weight);
    line-height: 1.2;

    [data-fs-icon] {
      flex-shrink: 0;
      width: var(--fs-newsletter-icon-size);
      height: var(--fs-newsletter-icon-size);
    }

    @include utilities.media(">=notebook") {
      justify-content: left;
    }
  }

  [data-fs-newsletter-addendum] {
    text-align: center;

    @include utilities.media(">=notebook") {
      text-align: left;
    }
  }

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

  &:not([data-fs-newsletter="card"]) {
    @include utilities.media(">=notebook") {
      [data-fs-newsletter-form] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: var(--fs-spacing-8);
      }

      [data-fs-button] {
        width: auto;
        min-width: 40%;
        margin-left: auto;
      }
    }
  }

  &[data-fs-newsletter="card"] {
    text-align: center;
    border-radius: var(--fs-newsletter-card-border-radius);

    [data-fs-newsletter-header],
    [data-fs-newsletter-addendum] {
      text-align: center;
    }

    [data-fs-newsletter-header-title] {
      justify-content: center;
    }
  }

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

    [data-fs-link="true"] { color: var(--fs-color-link-inverse); }
  }

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

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