.newsletter {
  display: grid;
  position: relative;
}

.newsletter__container {
  align-items: center;
  display: flex;
  position: relative;
  width: min(100%, 32em);
}

.newsletter__container form {
  align-items: center;
  background: var(--color-white);
  border: none;
  border-radius: calc(var(--border-radius) / 2);
  box-shadow: var(--box-shadow-strong);
  display: flex;
  flex: 1;
  font-size: var(--font-size-medium);
  grid-auto-flow: column;
  grid-template-columns: 1fr auto;
  letter-spacing: var(--letter-spacing);
  line-height: 1em;
  transition:
    background var(--transition),
    box-shadow var(--transition)
  ;
}

.newsletter__container form input,
.newsletter__container form button {
  display: flex;
  padding: 1.1em;
  margin-bottom: -0.225em;
  margin-top: -0.325em;
  user-select: none;
  -webkit-user-select: none;
}

.newsletter__container form input {
  appearance: none;
  border: none;
  flex: 1;
  padding-right: 0;
  transition: color var(--transition);
  vertical-align: middle;
}

.newsletter__container form input::placeholder {
  color: oklch(var(--oklch-ink) / 0.4);
  transition: color var(--transition);
}

.newsletter__container form input:focus::placeholder {
  color: transparent;
}

.newsletter__container form button {
  cursor: pointer;
  font-weight: 500;
  transition: color var(--transition);
}

.newsletter__container form:has(input:placeholder-shown) {
  background: oklch(var(--oklch-white) / 0.4);
  box-shadow: var(--box-shadow);
}

.newsletter__container form:has(input:focus) {
  background: var(--color-white);
  box-shadow: var(--box-shadow-strong);
}

.newsletter__container:after {
  align-items: center;
  background: url('/assets/images/general/icon-check.svg') center / 0.5625em auto no-repeat var(--color-green);
  border-radius: 100%;
  content: '';
  display: flex;
  font-size: var(--font-size-large);
  filter: blur(0.1em);
  height: 1.25em;
  justify-content: center;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: -0.625em;
  top: -0.625em;
  transform: scale(0.5);
  transition:
    filter var(--transition),
    opacity var(--transition),
    transform var(--transition)
  ;
  width: 1.25em;
  will-change: transform;
}



.newsletter--inline .newsletter__container {
  margin-inline: auto;
}

.newsletter--success .newsletter__container:after {
  filter: none;
  opacity: 1;
  transform: scale(1);
}

.newsletter--error .newsletter__container form {
  box-shadow: 0 0 0 max(1px, 0.05em) var(--color-red);
}

.newsletter--error .newsletter__container form input,
.newsletter--error .newsletter__container form button {
  color: var(--color-red);
}



@media(prefers-color-scheme: dark) {

  .newsletter__container form {
    background: var(--color-slate-3);
  }

  .newsletter__container form:has(input:placeholder-shown) {
    background: oklch(var(--oklch-slate-3) / 0.4);
  }

  .newsletter__container form:has(input:focus) {
    background: var(--color-slate-3);
  }

}