<div class="form">  
      <div><label for="email">Email Address*:</label>
    <input id="email" name="email" type="email" value="na@me@example.com" required />

    <label for="secret">Secret*: (lower case)</label>
    <input id="secret" name="secret" type="text" value="test" pattern="[a-z]+" required/>

    <label for="age">Your age*: (18+)</label>
    <input id="age" name="age" type="number" value="5" min="18" required/>

    <label><input name="tos" type="checkbox" required checked /> - Do you agree to ToS?</label>
</div>
</div>
 <div class="callout-wrapper">
  <div class='callout'>
    <div class='icon'>
      <span></span>
      <span></span>
      <span></span>
    </div>
    <div class="message">
      <div class="heading"></div>
      <div class="description"></div>
    </div>
  </div>
</div>
  

@property --variant {
	syntax: "error | success";
	initial-value: error;
	inherits: true;
}


.form {
  display: flex;
  justify-content: center;
  flex-direction: row;
 
  .break {
    flex-basis: 100%;
    height: 0;
  }
}

.callout-wrapper {
  container-name: component-wrapper;
  margin-top: 10vh;

  .callout {
    display: flex;
    justify-content: start;
    padding: 10px;
    border-radius: 25px;
    width: 40vw;
    min-width: 400px;
    max-height: 100px;
    min-height: 100px;
    
    .message {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
    
      .heading {
        font-weight: bold;
        text-transform: capitalize;
        font-size: 2em;
      }
    }
    
    border-width: 5px;
    border-style: solid;
    
    margin: 10px;
    justify-self: center;
  }
}

body:has(:invalid) .callout-wrapper {
  --variant: error;
}

body:not(:has(:invalid)) .callout-wrapper  {
  --variant: success;
}

@container component-wrapper style(--variant: error) {
  
  .callout {
     background-color: #e2738c;
     border: 5px solid #984b4b;
     color: #8B0000;
  }
  
    .heading::after {
    content: 'Your input is invalid';
  }
  
  .description::after {
    content: 'The path to victory is now blocked, please fix it and try it again.';
  }
  
  .icon {
    * {
      color: #984b4b;
      transform: rotate(180deg);
    }

    :first-child {
      &::before, &::after {
        transform: rotate(45deg);
      }
    }

    :nth-child(2) {
      &::before, &::after {
        width: 0;
        margin-left: calc(-.5 * var(--size));
      }
    }


    :last-child {
      &::before, &::after {
        transform: rotate(-45deg);
      }
    }
  }
}

@container component-wrapper style(--variant: success) {
  
  .callout {
    background-color: #32de84;
    border: 5px solid #006400;
    color: #006400;
  }
  
   .heading::after {
    content: 'Your input is valid';
  }
  
  .description::after {
    content: 'The path to victory is now unblocked and you can proceed';
  }
  
  .icon {
    * {
      color: #006400;
      transform: rotate(180deg);
    }


    :first-child, :last-child {
      &::before, &::after {
        border-width: calc(0.4 * var(--size));
        margin-top: calc(-.4 * var(--size));
      }
    }

    :first-child::before, :first-child::after {
      transform: translateX(calc(2.4 * var(--size))) translateY(calc(-1.1 * var(--size))) rotate(40deg);
      width: calc(4 * var(--size));
    }

    :nth-child(2)::before, :nth-child(2)::after {
      width: calc(1.5 * var(--size));
    }

    :nth-child(2)::before {
      margin-left: calc(-1 * var(--size));
    }

    :last-child::before, :last-child::after {
      transform: translateX(calc(2.4 * var(--size))) translateY(calc(1.1 * var(--size))) rotate(-40deg);
      width: calc(4 * var(--size));
    }

    :first-child::before, :first-child::after {
      transform: translateX(calc(-.3 * var(--size))) translateY(calc(-1.1 * var(--size))) rotate(-40deg);
      width: calc(4 * var(--size));
    }

    :nth-child(2)::before {
      margin-left: calc(1 * var(--size));
    }

    :nth-child(2)::after {
      margin-left: calc(-1 * var(--size));
    }

    :last-child::before, :last-child::after {
      transform: translateX(calc(-.3 * var(--size))) translateY(calc(1.1 * var(--size))) rotate(40deg);
      width: calc(4 * var(--size));
    }
  }  
}

:root {
  --size: 1rem;
  --timing: cubic-bezier(.38,-0.52,.14,1.13);
  --duration: 0.5s;
}

body {
  margin: 0;
  font-family: sans-serif;
}

.callout {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}


.icon {
  padding: 15px;
  position: relative;
  width: calc(6 * var(--size));
  height: calc(6 * var(--size));

  * {
    box-sizing: border-box;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transition-property: transform, color;
    transition-duration: var(--duration);
    transition-timing-function: var(--timing);
    transition-delay: 0.1s;

    &::before, &::after {
      box-sizing: border-box;
      position: absolute;
      content: '';
      display: block;
      background-color: transparent;
      border: solid calc(.5 * var(--size)) currentColor;
      border-radius: 1000px;
      margin: calc(-.5 * var(--size)) 0 0 calc(-3 * var(--size));
      width: calc(6 * var(--size));
      height: 0;
      transition-property: margin, width, height, transform, border;
      transition-duration: var(--duration);
      transition-timing-function: var(--timing);
      transition-delay: 0.1s;
    }

    &:first-child {
      transition-delay: 0s;
      &::before, &::after {
        transition-delay: 0s;
      }
    }

    &:last-child {
      transition-delay: 0.2s;
      &::before, &::after {
        transition-delay: 0.2s;
      }
    }
  }
}

label {
  display: block;
  margin-top: 1em;
}

input {
   border-radius: 5px;
}

input:invalid {
  background-color: ivory;
  outline: 2px solid red;
}