/* Component: NewsletterForm ------------------------------------------------ */
@layer components {
  .tp-newsletter__form {
    display: flex;
    align-items: stretch;
    max-width: 100%;
    border: var(--tp-border-brass-soft);
    background: none;
  }

  .tp-newsletter__input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: var(--tp-btn-h-signup);
    background: none;
    border: 0;
    padding: 0 12px;
    font-family: var(--tp-font-serif);
    font-size: var(--tp-size-input);
    font-style: italic;
    color: var(--tp-color-text);
  }

  .tp-newsletter__input:focus-visible {
    outline-offset: -3px;
  }

  .tp-newsletter__submit {
    flex: none;
  }

  /* Confirmation: opacity cross-fade as in the export, plus visibility so it
     is not announced or focusable while hidden. */
  .tp-newsletter__note {
    margin-top: 14px;
    font-size: var(--tp-size-note);
    font-style: italic;
    color: var(--tp-color-ink);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--tp-dur) ease, visibility 0s linear var(--tp-dur);
  }

  .tp-newsletter.is-signed .tp-newsletter__note,
  .tp-newsletter.is-error .tp-newsletter__note {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--tp-dur) ease, visibility 0s;
  }

  .tp-newsletter.is-busy .tp-newsletter__submit {
    opacity: 0.6;
    pointer-events: none;
  }
}