/* See ./promocode-field.md for design notes and rationale. */

.promocode-field {
  --pcf-shell-padding-inline: 15px;
  --pcf-form-width: 300px;
  --pcf-control-height: 48px;
  --pcf-submit-width: 110px;
  --pcf-input-gap: 10px;
  --pcf-pill-radius: 25px;
  --pcf-stroke-width: 2px;
  --pcf-stroke-color: var(--nc-color-border-strong);
  --pcf-button-border: #242e39;
  --pcf-input-width: calc(180px - var(--pcf-stroke-width));
  --pcf-input-padding-start: calc(15px - var(--pcf-stroke-width));

  box-sizing: border-box;
  inline-size: 100%;
  padding-block: 10px;
  padding-inline: var(--pcf-shell-padding-inline);
  color: var(--nc-color-text-primary);
  font-family: var(--nc-font-family);
  letter-spacing: var(--nc-text-letter-spacing);
}

.promocode-field__label {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.promocode-field__form {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  inline-size: var(--pcf-form-width);
  max-inline-size: 100%;
  block-size: var(--pcf-control-height);
  margin-inline: auto;
  border: var(--pcf-stroke-width) solid var(--pcf-stroke-color);
  border-radius: var(--pcf-pill-radius);
  background-color: var(--nc-color-bg-default);
}

.promocode-field__form:has(.promocode-field__input:focus) {
  --pcf-stroke-color: var(--nc-color-focus);
}

.promocode-field__input {
  box-sizing: border-box;
  flex: 1 1 auto;
  inline-size: var(--pcf-input-width);
  block-size: 100%;
  padding: 0;
  padding-inline-start: var(--pcf-input-padding-start);
  margin: 0;
  margin-inline-end: var(--pcf-input-gap);
  overflow: clip;
  appearance: none;
  border: 0;
  border-start-start-radius: calc(var(--pcf-pill-radius) - var(--pcf-stroke-width));
  border-end-start-radius: calc(var(--pcf-pill-radius) - var(--pcf-stroke-width));
  background-color: transparent;
  color: var(--ds-color-neutral-900);
  font-family: inherit;
  font-size: var(--ds-font-size-16);
  font-weight: 400;
  line-height: 18px;
  letter-spacing: normal;
}

.promocode-field__input::placeholder {
  color: var(--nc-color-text-primary);
  opacity: 1;
}

/* The capsule stroke is the focus indicator; a UA outline would ring the open inline-end edge. */
.promocode-field__input:focus {
  outline: none;
}

.promocode-field__submit {
  box-sizing: border-box;
  flex: 0 0 var(--pcf-submit-width);
  inline-size: var(--pcf-submit-width);
  block-size: var(--pcf-control-height);
  padding: 0;
  margin-block: calc(-1 * var(--pcf-stroke-width));
  margin-inline: 0 calc(-1 * var(--pcf-stroke-width));
  border: 1px solid var(--pcf-button-border);
  border-radius: var(--pcf-pill-radius);
  background-color: var(--nc-color-border-strong);
  color: var(--nc-color-bg-default);
  font-family: inherit;
  font-size: var(--ds-font-size-16);
  font-weight: var(--ds-font-weight-extrabold);
  line-height: 18px;
  letter-spacing: var(--nc-text-letter-spacing);
  text-align: center;
  cursor: pointer;
}

.promocode-field__submit:hover,
.promocode-field__submit:focus-visible {
  background-color: var(--ds-color-neutral-800);
}

.promocode-field__error {
  inline-size: var(--pcf-form-width);
  max-inline-size: 100%;
  margin-block-start: 5px;
  margin-inline: auto;
  color: var(--nc-color-status-error);
  font-size: var(--ds-font-size-12);
  font-weight: var(--ds-font-weight-medium);
  line-height: 20px;
  letter-spacing: var(--nc-text-letter-spacing);
  text-align: start;
}

.promocode-field__error[hidden] {
  display: none;
}

/* tablet */
@media (width >= 768px) {
  .promocode-field {
    --pcf-shell-padding-inline: 20px;
  }
}

/* desktop */
@media (width >= 1022px) {
  .promocode-field {
    --pcf-shell-padding-inline: 15px;
  }
}