@use '../../mixins/button';
@use '../../mixins/input';
@use '../../mixins/ms';
@use '../../mixins/spacing';
@use '../../compiled/tokens/scss/size';

/// Mailchimp form customizations
///
/// These assume Mailchimp's CSS is not included.
///
/// @link https://mailchimp.com/help/css-hooks-for-customizing-forms/
/// @link https://mailchimp.com/help/customize-embedded-signup-form/

#mc_embed_signup_scroll {
  @include spacing.vertical-rhythm;

  /// If the form is not the first item in a rhythm container and its first
  /// child is not `1em` in font size, it can cause the form contents to look
  /// inconsistent with surrounding content in terms of spacing. (Luckily, this
  /// and the parent margin should collapse so there's no need to override the
  /// container margin.)
  #mc_embed_shell:not(:first-child) & > :first-child {
    margin-block-start: var(--rhythm);

    &:where(h1, h2, h3, h4, h5, h6, [class*='heading']) {
      margin-block-start: var(--rhythm-headings, var(--rhythm));
    }
  }
}

#mc_embed_shell {
  .indicates-required {
    color: var(--theme-color-text-muted);
    font-size: ms.step(-1);
    text-align: end;

    + * {
      margin-block-start: 0;
    }
  }

  .mc-field-group {
    display: grid;
    gap: #{size.$spacing-gap-form-group-default};
  }

  input {
    &:not(.c-input):not([type='checkbox']):not([type='radio']):not(
        [type='submit']
      ):not([type='hidden']) {
      @include input.default;
    }
  }

  .button:not(.c-button) {
    @include button.default;
  }

  .asterisk {
    color: var(--theme-color-icon-error);
  }
}