.demo {
  background-color: #eeeeee;
  padding: 1rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  max-width:30rem;

  input {
    padding: 0.5rem;
  }
  
  input[type="text"],
  input[type="email"] {
    border: 2px solid black;
        width: auto;
    field-sizing: unset;
    min-inline-size: unset;
  }

  input[type="submit"] {
    max-width: fit-content;
  }

  label {
    &::after {
      content: unset;
    }
  }
}

.demo1 {
  .ex_input {
    border: 2px solid black;
  }

  #ex1:valid,
  #ex2:user-valid {
    border-color: green;
  }

  #ex2:user-invalid,
  #ex1:invalid {
    border-color: red;
  }
}

.demo2 {
  .ex3 {
    border: 2px solid black;
  }

  #ex3:valid,
  #ex3:user-valid {
    border-color: green;
  }

  #ex3:user-invalid {
    border-color: red;
  }
}

.demo3 {
  label {
    position: relative;

    &::after {
      content: var(--msg-content, unset);
      position: absolute;
      margin-left: auto;
      width: fit-content;
      font-size: .875rem;
      padding: 0.25rem;
      border-radius: .5rem;
      background-color: var(--msg-color, inherit);
      color: var(--msg-textcolor, inherit);
    }
  }

  input[type="text"],
  input[type="email"] {
    border-color: var(--msg-color, inherit);
  }

  label:has( + input[required]) {
    --msg-content: ' (required)'; 
  }

  input:user-valid,
  input:valid,
  label:has( + input:user-valid),
  label:has( + input:valid) {
    --msg-content: ' valid!';
    --msg-color: green;
    --msg-textcolor: white;
  }

  input:user-invalid,
  label:has( + input:user-invalid) {
    --msg-content: ' invalid...';
    --msg-color: red;
    --msg-textcolor: white;
  }
}