<!-- :valid -->
<section class="example-cntr validation valid">
    <h1>CSS <code>:valid</code> pseudo-class</h1>
    <p>The <code>:valid</code> pseudo-class targets form elements whose formatting is correct according to that element’s required format.</p>
    <p>In the following example, when the email input field has an email structure formatted correctly, the field it’s considered “valid” and a <span class="green">green</span> border appears around the input.</p>
    <p><em><span class="underline">Note:</span> In its default state, the field is considered valid. Not sure about you, but to me that feels counterintuitive :p</em></p>
    <label>
        <span>Email:</span>
        <input type="email" id="email" placeholder="name@domain.com">
    </label>
</section>

<!-- :invalid -->
<section class="example-cntr validation invalid">
    <h1>CSS <code>:invalid</code> pseudo-class</h1>
    <p>The <code>:invalid</code> pseudo-class targets form elements whose formatting isn’t correct according to that element’s required format.</p>
    <p>In the following example, when the email input field has an incorrectly formatted email structure it’s automatically invalid and a <span class="red">red</span> border appears around the input.</p>
    <label>
        <span>Email:</span>
        <input type="email" id="email" placeholder="name@domain.com">
    </label>
</section>

body {
    display: flex;
    justify-content: space-evenly;
    width: 100vw;
}
section {
    margin: 5px;
}
//'validations' generic styles
.validation {
    input[type=email] {
        box-sizing: content-box;
        width: 200px;
        padding: 0 5px;
        border: #666 5px solid;
        border-radius: 2px;
        cursor: text;
        transition: .5s;
    }
    label { display: inline-block; }
    span {
        display: block;
        margin-bottom: 5px;
    }
}

//:valid
.valid {
    input[type=email]:valid { border-color: $g; }
}
//:invalid
.invalid {
    input[type=email]:invalid { border-color: $r; }
}



//Styling stuff not needed for demo
body {
    text-align: left;
    line-height: 1.5;
}
h1 {
    font-size: 24px;
    text-transform: none;
    border-bottom: #636363 1px dotted;
    code {
        display: inline-block;
        margin-bottom: 10px;
        color: $y;
        background: none;
        box-shadow: none;
    }
}
code { font-size: 1em; }
input {
    width: 30px; height: 30px;
    vertical-align: middle;
    outline: none;
}
input, label { cursor: pointer; }
input[type=text],
input[type=email] { width: 100%; }

label {
    padding: 3px 8px 5px;
    border-radius: 2px;
    border: transparent 1px solid;    
    transition: .5s;
    &:hover {
        border: rgba(white,.2) 1px solid;        
    }
}
.example-cntr {
    max-width: 800px;
    margin: 0 auto 50px;
    padding: 30px;
    box-shadow: 0 1px 2px rgba(black,.3);
    background: rgba(black,.15);
}
.flex-ctnr {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

span {
    &.red,
    &.green,
    &.yellow {
        display: inline-block;
        font-weight: bold;
        font-size: 18px;
        text-shadow: 0 1px 0 #000;
    }
}
.underline { text-decoration: underline; }
.red { color: $r; }
.green { color: $g; }
.yellow { color: $y; }