/*
 * viewer_download.css
 * Styles the Brevo subscription form with the documentation theme.
 *
 * The markup keeps the ids and classes Brevo's main.js drives (#sib-form,
 * #error-message, #success-message, .entry__error, ...) but carries none of
 * Brevo's own stylesheet or inline styles, so everything below is free to use
 * the Material palette and follow the light and dark schemes.
 *
 * Nothing here may set `display` on Brevo's own elements with !important:
 * main.js drives them, by adding sib-form-message-panel--active to the panel it
 * wants shown and by writing element.style.display on the field errors.
 */

/* Hidden until the visitor asks for the download. */
#viewer-download[hidden] {
  display: none;
}

#viewer-download {
  margin: 1.2rem 0;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: .2rem;
  background: var(--md-code-bg-color);
  padding: 1.2rem;
}

#viewer-download .sib-text-form-block h2 {
  margin: 0 0 .2rem;
  font-size: 1.1rem;
  line-height: 1.4;
}

#viewer-download .sib-text-form-block p {
  margin: 0 0 .8rem;
  font-size: .75rem;
  color: var(--md-default-fg-color--light);
}

/* Message panels. main.js reveals one by adding the --active class (that is
   what Brevo's own stylesheet keyed on, and this file replaces it), so the rule
   below is what makes the success and error feedback visible at all. */
#viewer-download .sib-form-message-panel {
  display: none;
  margin-bottom: .8rem;
  padding: .6rem .8rem;
  border-left: .2rem solid;
  border-radius: .1rem;
  font-size: .75rem;
}

#viewer-download #error-message {
  border-color: var(--md-typeset-del-color, #ff5252);
  background: color-mix(in srgb, var(--md-typeset-del-color, #ff5252) 12%, transparent);
}

#viewer-download #success-message {
  border-color: var(--md-typeset-ins-color, #00c853);
  background: color-mix(in srgb, var(--md-typeset-ins-color, #00c853) 12%, transparent);
}

#viewer-download .sib-form-message-panel--active {
  display: block;
}

#viewer-download .sib-form-message-panel__text {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
}

#viewer-download .sib-notification__icon {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-top: .1rem;
  fill: currentcolor;
}

/* Fields. */
#viewer-download .entry_block {
  margin-bottom: .9rem;
}

#viewer-download .entry__label {
  display: block;
  margin-bottom: .25rem;
  font-size: .75rem;
  font-weight: 700;
}

#viewer-download .entry__label[data-required]::after {
  content: " *";
  color: var(--md-typeset-del-color, #ff5252);
}

#viewer-download input.input {
  width: 100%;
  max-width: 24rem;
  padding: .45rem .55rem;
  border: 1px solid var(--md-default-fg-color--light);
  border-radius: .1rem;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  font-family: inherit;
  font-size: .8rem;
}

#viewer-download input.input:focus {
  outline: none;
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--md-accent-fg-color) 25%, transparent);
}

#viewer-download input.input::placeholder {
  color: var(--md-default-fg-color--lighter);
}

#viewer-download .input--hidden {
  display: none;
}

#viewer-download .entry__specification {
  display: block;
  margin-top: .25rem;
  font-size: .65rem;
  color: var(--md-default-fg-color--light);
}

/* Brevo writes the message into this label and sets display inline. */
#viewer-download .entry__error {
  display: none;
  margin-top: .25rem;
  font-size: .65rem;
  color: var(--md-typeset-del-color, #ff5252);
}

#viewer-download .entry__error:not(:empty) {
  display: block;
}

/* main.js flags the field whose value it rejected. */
#viewer-download .entry_errored input.input {
  border-color: var(--md-typeset-del-color, #ff5252);
}

/* Submit button, styled like the theme's primary action. */
#viewer-download .sib-form-block__button {
  display: inline-flex;
  gap: .4rem;
  align-items: center;
  padding: .5rem 1.1rem;
  border: none;
  border-radius: .1rem;
  background: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
  font-family: inherit;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s;
}

#viewer-download .sib-form-block__button:hover {
  background: var(--md-accent-fg-color);
}

/* main.js disables the button while the request is in flight. */
#viewer-download .sib-form-block__button-disabled {
  opacity: .6;
  cursor: progress;
}

#viewer-download .progress-indicator__icon {
  width: .9rem;
  height: .9rem;
  fill: currentcolor;
  animation: viewer-download-spin 1s linear infinite;
}

/* Brevo adds this class while the request is not in flight. */
#viewer-download .sib-hide-loader-icon {
  display: none;
}

@keyframes viewer-download-spin {
  to { transform: rotate(360deg); }
}

.viewer-download-privacy {
  margin: .9rem 0 0;
  font-size: .65rem;
  color: var(--md-default-fg-color--light);
}

/* The link in the table that opens the form. */
a.viewer-download-trigger {
  font-weight: 700;
}