/* newslettersignup.st.css  */
@namespace "NewsletterSignup";

/* = Project info and vars */
:import {
  -st-from: "./project.st.css";
  -st-default: Base;
  -st-named:
    tablet,
    laptop,
    --spacing-unit,
    --grid-gap-md,
    --grid-inner-base-columns,
    --color-faint,
    --color-ui;
}

:import {
  -st-from: "../../components/NewsletterSignUp/newslettersignup.st.css";
  -st-default: NewsletterSignup;
}

@st-scope Base {
  NewsletterSignup::wrapper {
    border-radius: 20px 80px 10px 80px;
    background-color: var(--color-faint);
    padding: calc(var(--spacing-unit) * 4) 30px 20px;
    margin-bottom: calc(var(--spacing-unit) * 3);
  }
}

@media value(tablet) {
  @st-scope Base {
    NewsletterSignup {
      border-width: calc(var(--spacing-unit) * 3);
    }

    NewsletterSignup::wrapper {
      margin-right: -80px;
      margin-left: -80px;
      padding: calc(var(--spacing-unit) * 4) 80px 0 80px;
    }
  }

  @st-scope Base {
    NewsletterSignup::textWrapper {
      margin-bottom: calc(var(--spacing-unit) * 3);
    }

    NewsletterSignup::title {
      color: var(--color-ui);
      margin-bottom: calc(var(--spacing-unit) * 2);
    }

    NewsletterSignup::description {
      color: var(--color-ui);
    }

    NewsletterSignup::form {
      margin-bottom: calc(var(--spacing-unit) * 5);
    }

    NewsletterSignup::textInput::label {
      color: var(--color-ui);
      margin-bottom: calc(var(--spacing-unit) * 2);
    }

    NewsletterSignup::buttonContainer {
      margin: 0 0 calc(var(--spacing-unit) * 7);
    }
  }

  @media value(laptop) {
    @st-scope Base {
      NewsletterSignup::form {
        margin: 0;
      }
    }
  }

  @supports (display: grid) {
    @media value(laptop) {
      @st-scope Base {
        NewsletterSignup::wrapper {
          display: grid;
          grid-template-columns: var(--grid-inner-base-columns);
          grid-column-gap: var(--grid-gap-md);
        }

        NewsletterSignup::textWrapper {
          grid-column: auto / span 6;
        }

        NewsletterSignup::form {
          grid-column: auto / span 6;
          /* Matching the inner grid so gaps are identical */
          display: grid;
          grid-template-columns: repeat(6, minmax(0, 4.011vw));
          grid-column-gap: var(--grid-gap-md);
        }

        NewsletterSignup::textInput {
          /* gap between should be same as grid gap */
          grid-column: auto / span 4;
        }

        NewsletterSignup::buttonContainer {
          /* group gets higher when error injected, to compensate that align centre not used */
          margin: 44px 0 0;
          grid-column: auto / span 2;
        }

        /* To align the button to the edge of the grid as design asked */
        NewsletterSignup::signupBtn {
          width: 100%;
        }
      }
    }
  }
}