:root {
  --input-border-color: 255, 255, 255;
  --input-bg-color: 0, 0, 0;
  --button-bg-color: 102, 204, 255;
  --valid-border-color: var(--valid-border-color);
  --invalid-border-color: var(--invalid-border-color);
  --invalid-placeholder-color: var(--invalid-placeholder-color);
  --error-color: 255, 0, 0;
  --success-color: 0, 255, 0;
}

main {
  article {
    select {
      border-color: rgba(var(--input-border-color), 0.1);
      width: fit-content;
      padding: .5rem 1rem;
      border-radius: var(--border-radius);
      background-color: rgba(var(--input-bg-color), 0.1);
      justify-self: end;
    }
  }
}

aside {

  label {
    display: grid;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: capitalize;
    margin-block-end: 0.25rem;
    margin-block-start: 1rem;
    margin-inline: 1rem;
  }

  input:disabled {
    background-color: transparent;
  }

  input[type="checkbox"] {
    margin-right: 0.5rem;
    vertical-align: middle;
  }

  input:invalid:not(:placeholder-shown)::placeholder {
    color: rgba(var(--error-color).05);
    font-style: italic;
  }

  input,
  select,
  textarea {
    padding: 0.5rem;
    border-radius: var(--border-radius);
    width: 100%;
    border: 0.125rem solid rgba(var(--input-border-color), 0.1);
    background-color: rgba(var(--input-bg-color), 0.1);
    font-size: 1rem;
    font-family: inherit;
    font-size: 100%;
  }

  textarea {
    field-sizing: content;
    min-height: 4rem;
  }

  input:valid,
  select:valid {
    border: solid 0.125rem transparent;
    border-inline-start-color: rgba(var(--success-color), 0.5);
  }

  input:invalid,
  select:invalid {
    border: solid 0.25rem transparent;
    border-inline-start-color: rgba(var(--error-color), 0.5);
  }

  /* https://codepen.io/una/pen/MWMmYxb?editors=1100 */
  select {
    appearance: base-select;
    border: solid 0.0625rem rgba(var(--input-border-color), 0.1);
    border-radius: var(--border-radius);
    display: grid;
    font-family: inherit;
    font-size: 100%;

    option {
      font-family: inherit;
      font-size: 100%;

      &::checkmark {
        display: none;
      }
    }

    &::picker-icon {
      display: none;
    }
  }

  ::picker(select) {
    appearance: base-select;
  }

  input:invalid:not(:placeholder-shown)::placeholder {
    color: rgba(var(--error-color));
    font-style: italic;
  }


  form {
    display: grid;
    max-width: 45rem;
    overflow: hidden;
    position: relative;

    /* For accessibility */
    legend {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
      border: 0;
    }

    fieldset {
      display: grid;
      overflow: auto;
      border: none;
      margin: 0;
      padding: 0;
    }


    select option::checkmark,
    select::picker-icon {
      display: none;
    }

    select ::picker(select) {
      border-radius: var(--border-radius);
      padding: 0;
      box-shadow: 0 12.8px 28.8px rgba(0, 0, 0, 0.13), 0 0 9.2px rgba(0, 0, 0, 0.11);
      border: 1px solid #ececec;
    }

    select option {
      grid-template-columns: 1.5rem 1fr auto;
      padding: 0.5rem 1rem;
      place-items: start;
    }

    select option,
    selectedcontent {
      display: grid;
      gap: 1rem;
      font-size: 1rem;
      align-items: center;
    }

    selectedcontent {
      padding: 0.5rem;
      grid-template-columns: 1.5rem auto;
    }

    button,
    [role="button"] {
      background-color: rgba(var(--button-bg-color), 0.25);

      &:disabled {
        background-color: rgba(var(--button-bg-color), 0.1);
        opacity: 0.5;
        cursor: not-allowed;
      }

      &:hover,
      &:focus-visible,
      button:hover,
      button:focus-visible {
        background-color: rgba(var(--button-bg-color), 0.5);
        color: rgba(var(--txt-active));
      }

      &:has([data-dirty="true"]):valid::after {
        content: '✓ Ready to submit';
        display: block;
        color: rgba(var(--success-color));
        margin-top: 0.5rem;
        animation: fadeIn 0.5s ease-in-out;
      }

      &:has(:invalid) button[type="submit"],
      &:has(:invalid) [role="button"][type="submit"] {
        pointer-events: none;
        opacity: 0.5;
      }

      /* CSS-only button state management */

      /* Reset button: only enabled when form has dirty data */
      [role="button"][aria-label="Reset"] {
        pointer-events: none;
        opacity: 0.5;
        cursor: not-allowed;
      }

      &:has([data-dirty="true"]) [role="button"][aria-label="Reset"] {
        pointer-events: auto;
        opacity: 1;
        cursor: pointer;
      }

      /* Save button: only enabled when form has dirty data AND is valid */
      [role="button"][aria-label="Save"] {
        pointer-events: none;
        opacity: 0.5;
        cursor: not-allowed;
      }

      &:has([data-dirty="true"]):valid [role="button"][aria-label="Save"] {
        pointer-events: auto;
        opacity: 1;
        cursor: pointer;
      }

      pointer-events: auto;
      opacity: 1;
      cursor: pointer;
    }

    input:invalid:not(:placeholder-shown) + .error {
      display: block;
    }
  }
}

/* aside form:has(input:not(:placeholder-shown)) {
  display: grid;
} */