.pc--opt-out-initial {
  margin-bottom: 40px;
}

.pc--opt-out-form {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

@media screen and (min-width: 750px) {
  .pc--opt-out-form {
    align-items: flex-start;
    max-width: 360px;
  }
}

.pc--opt-out-form-field_wrapper {
  width: 100%;

  --inputs-border-width: 1px;
  --duration-short: 100ms;
  --color-foreground: 18, 18, 18;
  --color-background: 255, 255, 255;
}

.pc--opt-out-form-field_wrapper .field__label {
  position: absolute;
  font-size: 16px;
  left: calc(var(--inputs-border-width) + 20px);
  top: calc(10px + var(--inputs-border-width));
  margin-bottom: 0;
  pointer-events: none;
  transition:
    top var(--duration-short) ease,
    font-size var(--duration-short) ease;
  color: rgba(var(--color-foreground), 0.75);
  letter-spacing: 1px;
  line-height: 1.5;
  width: initial;
}

/* stylelint-disable */
.pc--opt-out-form-field_wrapper .field__input:focus ~ .field__label,
.pc--opt-out-form-field_wrapper .field__input:not(:placeholder-shown) ~ .field__label,
.pc--opt-out-form-field_wrapper .field__input:-webkit-autofill ~ .field__label {
  /* stylelint-enable */
  font-size: 10px;
  top: calc(var(--inputs-border-width) + 5px);
  left: calc(var(--inputs-border-width) + 20px);
  letter-spacing: 0.4px;
}

.pc--opt-out-form-field_wrapper .field__input {
  flex-grow: 1;
  text-align: left;
  padding: 15px;
  margin: var(--inputs-border-width);
  transition: box-shadow var(--duration-short) ease;
  height: 45px;
  background-color: rgb(var(--color-background));
}

.pc--opt-out-form-field_wrapper input::placeholder {
  color: transparent;
}

.pc--opt-out-form-field_wrapper .field {
  z-index: 0;
  position: relative;
  width: 100%;
  display: flex;
  transition: box-shadow var(--duration-short) ease;
}

.pc--opt-out-form-message--success {
  margin-top: 20px;
}

.pc--opt-out-form-message {
  position: relative;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 0;
}

@media screen and (min-width: 750px) {
  .pc--opt-out-form-message {
    justify-content: flex-start;
  }
}

.pc--opt-out-form-button {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
  align-items: center;
  background-color: transparent;
  border: 0;
  color: currentcolor;
  cursor: pointer;
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  width: 44px;
  height: 100%;
  margin: 0;
}

.pc--opt-out-form-button:focus-visible {
  box-shadow:
    0 0 0 3px rgb(var(--color-background)),
    0 0 0 4px rgba(var(--color-foreground));
  background-color: rgb(var(--color-background));
}

.pc--opt-out-form-button:focus {
  box-shadow:
    0 0 0 3px rgb(var(--color-background)),
    0 0 0 4px rgba(var(--color-foreground));
  background-color: rgb(var(--color-background));
}

.pc--opt-out-form-button:not(:focus-visible, .focused) {
  box-shadow: inherit;
  background-color: inherit;
}

.pc--opt-out-form-button .icon {
  width: 15px;
}