.form {
  container-type: inline-size;
  container-name: form;
}

form > h3 {
  color: var(--color-text-subtle);
  /* margin-block-start: var(--size-4); */
  margin-block-end: var(--size-2);

  & + div {
    margin-block-end: var(--size-6);
  }
}

.form__fieldset {
  background-color: var(--color-bg-light);
  border-radius: var(--rounded-md);
  border-width: var(--main-border-width, var(--border));
  display: flex;
  flex-direction: column;
  padding-block: var(--size-4);
  /* padding: var(--size-4); */
  /* row-gap: var(--size-4); */
}

.form__field {
  display: flex;
  flex-direction: column;
  row-gap: var(--size-2);
  margin-block-end: var(--size-6);

  &:last-child {
    margin-block-end: 0;
  }

  label {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    line-height: var(--leading-none);
  }

  & > div:not(.input) {
    display: flex;
    align-items: baseline;
    flex-direction: row;
    column-gap: var(--size-1);

    & span {
      display: none;
    }

    & span:not(:empty) {
      display: inline-block;
      font-size: var(--text-xs);
      line-height: var(--leading-none);
      color: var(--color-text-subtle);

      &:before {
        display: inline-block;
        content: "-";
        padding-inline-end: var(--size-1);
      }
    }
  }

  /* If it has a checkbox or radio input */
  &:has(input[type="checkbox"]),
  &:has(input[type="radio"]) {
    flex-direction: row;
    align-items: center;
    column-gap: var(--size-2); // space between input and label

    label {
      font-weight: var(--font-normal); // lighter label for checkbox/radio
      margin-bottom: 0; // remove bottom margin
    }
  }
}

.form__fieldset .form__field {
  padding-inline: var(--size-4);
}

.form__field2 {
  /* border: 1px solid var(--color-border); */
  display: flex;
  align-items: center;
  gap: var(--size-2);
  padding-block: 14px;
  padding-inline: var(--size-4);

  label {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    line-height: var(--leading-none);
  }

  & > div, & > label {
    flex-grow: 1;
  }

  & > div {
    display: flex;
    flex-direction: column;
    row-gap: var(--size-1);

    & span {
      display: block;
      font-size: var(--text-xs);
      color: var(--color-text-subtle);
    }
  }

  & > input, & > select, & > textarea {
    /* flex-shrink: 0; */
    inline-size: auto;
    max-inline-size: var(--size-1-3);
    /* width: 100%; */
  }

  &:not(:last-child) {
    border-block-end-width: var(--border);
  }
}

.form__field--horizontal {
  @container form (min-width: 384px) {
    flex-direction: row;
    align-items: center;
    gap: var(--size-2);
    padding-block: var(--size-3_5);
    padding-inline: var(--size-4);
    margin-block-end: 0;

    &:first-child {
      padding-block-start: 0;
    }

    &:last-child {
      padding-block-end: 0;
    }

    & > div:not(.input) {
      flex-direction: column;
      flex-grow: 1;
      row-gap: var(--size-1);

      & span:not(:empty) {
        &:before { display: none; }
      }
    }

    & > input, & > select, & > textarea {
      /* flex-shrink: 0; */
      inline-size: auto;
      max-inline-size: var(--size-2-5);
      /* width: 100%; */
    }

    &:not(:last-child) {
      border-block-end-width: var(--border);
    }
  }

  @container form (min-width: 448px) {
    & > input, & > select, & > textarea {
      max-inline-size: var(--size-1-3);
    }
  }
}