: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: var(--error-color);
  --after-color: var(--after-color);
}

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;
    }
  }
}

/* MARK: FORMS */
main {
  aside {
    form {
      display: grid;
      max-width: 45rem;
      overflow: hidden;
      position: relative;

      label {
        display: grid;
        gap: 0.5rem;
      }

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

      input,
      select {
        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%;
      }

      input:valid,
      select:valid {
        border: solid 0.125rem transparent;
        border-inline-start-color: limegreen;
      }

      input:invalid,
      select:invalid {
        border: solid 0.25rem transparent;
        border-inline-start-color: red;
      }

      /* 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: crimson;
        font-style: italic;
      }

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

      button:disabled
      [role="button"]:disabled {
        background-color: rgba(var(--button-bg-color), 0.1);
        opacity: 0.5;
        cursor: not-allowed;
      }

      [role="button"]:hover,
      [role="button"]: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: var(--after-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;
      }

      .error {
        color: red;
        font-size: 0.85rem;
        display: none;
      }

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

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




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

aside form 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;
}

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

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

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

/* MARK: FIELDSETS */
aside form fieldset {
  display: grid;
  overflow: auto;
  border: none;
  margin: 0;
  padding: 0;
}

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

aside form fieldset label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: capitalize;
  margin-block-end: 0.25rem;
  margin-block-start: 1rem;
  margin-inline: 1rem;
}

aside form fieldset label input:disabled {
  background-color: transparent;
}

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

/* MARK: CONFIRMATION
*/
aside form>p {
  display: none;
  font-weight: bold;
  margin-block-end: 0.5rem;
}