.a-form-field {
  --gap-theme: var(--lens-semantic-spacing-desktop-gap-1);
  --gap: var(--a-form-field-gap, var(--gap-theme));
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  @container style(--atlas-theme: atlas) {
    --gap-theme: var(--lens-semantic-spacing-desktop-gap-0-5);
  }
}

.a-form-field-header {
  --row-gap: var(--a-form-field-header-row-gap, var(--gap));
  --col-gap: var(--a-form-field-header-col-gap, var(--lens-semantic-spacing-desktop-gap-1));
  display: grid;
  grid-template-columns: 1fr min-content;
  row-gap: var(--row-gap);
  column-gap: var(--col-gap);
  & .a-form-field-label,
  & .a-form-field-instruction {
    grid-column: 1;
  }
  & .a-form-field-label {
    grid-column-end: -1;
  }
  & .a-form-field-counter {
    grid-column: 2;
  }
}

.a-form-field-label {
  --gap: var(--a-form-field-label-gap, var(--lens-semantic-spacing-desktop-gap-0-5));
  --color: var(--a-form-field-label-color, var(--lens-semantic-color-type-default));
  --font-size: var(--a-form-field-label-font-size, var(--lens-semantic-font-label-sm-font-size));
  --line-height: var(
    --a-form-field-label-line-height,
    var(--lens-semantic-font-label-sm-line-height)
  );
  --letter-spacing: var(
    --a-form-field-label-letter-spacing,
    var(--lens-semantic-font-label-sm-letter-spacing)
  );
  --font-weight: var(--a-form-field-label-font-weight, var(--lens-semantic-font-weight-emphasis));
  display: inline-block;
  color: var(--color);
  font-size: var(--font-size);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  font-weight: var(--font-weight);
  & > span:first-of-type:not(.a-form-field-label-suffix):has(+ .a-form-field-label-suffix) {
    margin-inline-end: var(--gap);
  }
  &:has(span:first-of-type:not(.a-form-field-label-suffix) + .a-form-field-label-suffix) {
    font-size: 0;
    & span:first-of-type:not(.a-form-field-label-suffix),
    & .a-form-field-label-suffix {
      font-size: var(--font-size);
      vertical-align: middle;
    }
  }
}

.a-form-field-label-suffix {
  --color: var(--a-form-field-feedback-color, var(--lens-semantic-color-type-muted));
  --font-weight: var(
    --a-form-field-label-suffix-font-weight,
    var(--lens-semantic-font-weight-regular)
  );
  font-weight: var(--font-weight);
  color: var(--color);
  vertical-align: middle;
  &.a-form-field-label-suffix--asterisk {
    --color: var(--a-form-field-feedback-color, var(--lens-semantic-color-type-default));
  }
}

.a-form-field-instruction {
  --color: var(--a-form-field-instruction-color, var(--lens-semantic-color-type-muted));
  --font-size: var(
    --a-form-field-instruction-font-size,
    var(--lens-semantic-font-text-sm-font-size)
  );
  --line-height: var(
    --a-form-field-instruction-line-height,
    var(--lens-semantic-font-text-sm-line-height)
  );
  --letter-spacing: var(
    --a-form-field-instruction-letter-spacing,
    var(--lens-semantic-font-text-sm-letter-spacing)
  );
  --font-weight: var(
    --a-form-field-instruction-font-weight,
    var(--lens-semantic-font-weight-regular)
  );
  color: var(--color);
  font-size: var(--font-size);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  font-weight: var(--font-weight);
}

.a-form-field-counter {
  --color: var(--a-form-field-counter-color, var(--lens-semantic-color-type-muted));
  --font-size: var(--a-form-field-counter-font-size, var(--lens-semantic-font-number-sm-font-size));
  --line-height: var(
    --a-form-field-counter-line-height,
    var(--lens-semantic-font-number-sm-line-height)
  );
  --letter-spacing: var(
    --a-form-field-counter-letter-spacing,
    var(--lens-semantic-font-number-sm-letter-spacing)
  );
  --font-weight: var(--a-form-field-counter-font-weight, var(--lens-semantic-font-weight-regular));
  color: var(--color);
  font-size: var(--font-size);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  font-weight: var(--font-weight);
  font-variant-numeric: tabular-nums;
  &.a-form-field-counter--exceeded {
    --color: var(--a-form-field-counter-color, var(--lens-semantic-color-status-error-text));
    --font-weight: var(
      --a-form-field-counter-font-weight,
      var(--lens-semantic-font-weight-emphasis)
    );
  }
}

.a-form-field-help {
  --color: var(--a-form-field-help-color, var(--lens-semantic-color-type-muted));
  --font-size: var(--a-form-field-help-font-size, var(--lens-semantic-font-text-sm-font-size));
  --line-height: var(
    --a-form-field-help-line-height,
    var(--lens-semantic-font-text-sm-line-height)
  );
  --letter-spacing: var(
    --a-form-field-help-letter-spacing,
    var(--lens-semantic-font-text-sm-letter-spacing)
  );
  --font-weight: var(--a-form-field-help-font-weight, var(--lens-semantic-font-weight-regular));
  color: var(--color);
  font-size: var(--font-size);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  font-weight: var(--font-weight);
}

.a-form-field-feedback {
  --gap: var(--a-form-field-feedback-gap, var(--lens-semantic-spacing-desktop-gap-0-5));
  --color: var(--a-form-field-feedback-color, var(--lens-semantic-color-type-muted));
  --font-size: var(--a-form-field-feedback-font-size, var(--lens-semantic-font-text-sm-font-size));
  --line-height: var(
    --a-form-field-feedback-line-height,
    var(--lens-semantic-font-text-sm-line-height)
  );
  --letter-spacing: var(
    --a-form-field-feedback-letter-spacing,
    var(--lens-semantic-font-text-sm-letter-spacing)
  );
  --font-weight: var(--a-form-field-feedback-font-weight, var(--lens-semantic-font-weight-regular));
  --success-icon: path(
    "M9.9957 13.7756q.2487 0 .4214-.1683t.1727-.4171-.1683-.4214-.417-.1727q-.2489 0-.4215.1683-.1727.1683-.1727.417 0 .2489.1683.4215.1683.1727.417.1727m-.5373-2.7116h1.0833v-5H9.4584zm.5488 6.5193q-1.5648 0-2.9475-.5921t-2.4205-1.6294-1.6301-2.4185-.5924-2.9515.5921-2.9426q.5922-1.3723 1.6294-2.41 1.0373-1.038 2.4185-1.6302 1.3812-.5924 2.9515-.5924 1.5704 0 2.9426.5921t2.4101 1.6294q1.0377 1.0372 1.6301 2.4136.5924 1.3763.5924 2.941 0 1.565-.5921 2.9476t-1.6294 2.4205q-1.0373 1.0377-2.4136 1.6301t-2.9411.5924"
  );
  --error-icon: path(
    "m8.9215 12.7115 4.6859-4.665-.7741-.7741-3.9118 3.891-1.7709-1.75-.774.774zm1.0799 4.8718q-1.5591 0-2.9417-.5921-1.3828-.5922-2.4205-1.6294-1.0379-1.0373-1.6302-2.4194t-.5923-2.9411q0-1.5799.592-2.9521.5922-1.3723 1.6295-2.41 1.0373-1.038 2.4193-1.6302 1.382-.5924 2.9411-.5924 1.5799 0 2.9522.5921t2.41 1.6294 1.6302 2.409q.5923 1.3715.5923 2.9514 0 1.5591-.5921 2.9418t-1.6293 2.4205q-1.0374 1.0377-2.409 1.6301t-2.9515.5924"
  );
  --pt: var(--lens-semantic-spacing-desktop-padding-0-25);
  --icon: polygon();
  --icon-size: var(--lens-semantic-icon-size-md);
  display: flex;
  gap: var(--gap);
  color: var(--color);
  font-size: var(--font-size);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  padding-block-start: var(--pt);
  &::before {
    content: "";
    display: inline-flex;
    align-self: baseline;
    flex-shrink: 0;
    margin-block-start: calc(-1 * var(--pt));
    width: var(--icon-size);
    height: var(--icon-size);
    background: var(--color);
    clip-path: var(--icon);
  }
  &.a-form-field-feedback--error {
    --color: var(--a-form-field-feedback-color, var(--lens-semantic-color-status-error-text));
    --icon: var(--success-icon);
  }
  &.a-form-field-feedback--success {
    --color: var(--a-form-field-feedback-color, var(--lens-semantic-color-status-success-text));
    --icon: var(--error-icon);
  }
  @container style(--atlas-theme: atlas) {
    --icon-size: var(--lens-semantic-icon-size-sm);
    --success-icon: path(
      "M7.9965 11.0204q.199 0 .3372-.1346.138-.1346.1381-.3336t-.1346-.3372q-.1346-.1381-.3336-.1381t-.3372.1346q-.138.1346-.1381.3336t.1346.3372q.1346.1381.3336.1381m-.4298-2.1692h.8667v-4h-.8667zm.439 5.2154q-1.2518 0-2.358-.4737-1.106-.4737-1.9363-1.3035t-1.3041-1.9348q-.474-1.1048-.4739-2.3612 0-1.2563.4737-2.354.4735-1.098 1.3035-1.9281.8298-.8302 1.9347-1.3041t2.3613-.474 2.3541.4738q1.0977.4735 1.928 1.3035.8303.8298 1.3041 1.9308t.4739 2.353-.4737 2.3579q-.4735 1.1062-1.3035 1.9364-.8298.8302-1.9309 1.3041-1.101.4739-2.3528.4739"
    );
    --error-icon: path(
      "m7.1372 10.1692 3.7487-3.732-.6192-.6193-3.1295 3.1128-1.4167-1.4-.6192.6192zm.864 3.8974q-1.2473 0-2.3535-.4737t-1.9364-1.3035q-.8301-.8298-1.304-1.9355-.474-1.1055-.474-2.3528 0-1.264.4737-2.3618t1.3035-1.928T5.646 2.4072q1.1056-.474 2.3529-.474 1.264 0 2.3617.4738 1.0979.4735 1.928 1.3035.8302.8298 1.3042 1.9271t.4739 2.3612q0 1.2473-.4737 2.3534t-1.3035 1.9364q-.8298.8302-1.9272 1.3041t-2.3612.4739"
    );
  }
}