@use '../../compiled/tokens/scss/breakpoint';
@use '../../compiled/tokens/scss/color';
@use '../../compiled/tokens/scss/size';
@use '../../mixins/a11y';
@use '../../mixins/theme';

///
/// Subscribe component
///

.c-subscribe {
  position: relative;
}

.c-subscribe__heading {
  margin-block-end: size.$rhythm-default-rem;
}

///
/// 1. `12em` is a magic number based on the default button text values.
///    It may need to be tweaked if the text values change in the future.
///    Ideally we'd use `min-content`, but you can't pair that with `1fr`,
///    plus it doesn't seem to work since we're setting `inline-size:100%`.
///
.c-subscribe__controls {
  display: grid;
  gap: 1em;
  grid-template-columns: repeat(auto-fit, minmax(12em, 1fr)); // 1
}

.c-subscribe__control {
  inline-size: 100%;
}

///
/// 1. Ensures the form background color matches the current theme
/// 2. In the "destroyed" state, the CTA buttons are hidden so we
///    don't need the form to be absolutely positioned.
///

.c-subscribe__form {
  background-color: color.$text-light-emphasis;
  background-color: var(--theme-color-background-base); // 1
  block-size: 100%;
  inline-size: 100%;
  inset-block-start: 0;
  inset-inline-start: 0;

  .c-subscribe__controls-ui:not([hidden]) ~ & {
    position: absolute; // 2
  }

  ///
  /// 1. Allows for the visually hidden form to be keyboard accessible, will be
  ///    visually hidden when elements within the form are not in focus.
  ///

  .c-subscribe__form-input-label,
  .c-subscribe:not(.activate-form) // 1
    &:not(:target):not(:focus-within) {
    @include a11y.sr-only;
  }
}