/*
My take on pure CSS material design inputs and drop-down
Influenced heavily by: https://codepen.io/sevilayha/pen/IdGKH
*/
/*
A dropdown menu that covers the content
Note: MUST be placed inside a relative position element (works with .material-form-field)
Expected html:
<ul class="material-dropdown">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
...
</ul>
*/
.material-dropdown {
    position: absolute;
    left: 0;
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    background: #FFFFFF;
    color: #333;
    z-index: 1000;
    transition: 0.2s ease-in height, step-end box-shadow 0.2s;
    -moz-transition: 0.2s ease-in height, step-end box-shadow 0.2s;
    -webkit-transition: 0.2s ease-in height, step-end box-shadow 0.2s;
  }
  .material-dropdown.material-dropdown-open {
    box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.2);
  }
  .material-dropdown li {
    padding: 10px;
    cursor: default;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }
  .material-dropdown li:hover {
    background-color: #e8eaf6;
  }
  .material-dropdown li.material-dropdown-selected {
    background-color: #9fa8da;
  }
  
  /*
  A material design form field
  Expects this html (note the required attribute on the input):
  <div class="material-form-field">
  <input type="text" required/>
  <label class="material-form-field-label">Form field title</label>
  </div>
  */
  .material-form-field {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    position: relative;
    display: block;
    color: #333;
    padding: 25px 0 10px 0;
  }
  /* .material-form-field::after {
    content: "\00A0";
    display: block;
    color: #d50000;
    font-size: 12px;
    padding-top: 5px;
  } */
  .material-form-field .material-form-field-label {
    position: absolute;
    display: block;
    top: 35px;
    left: 10px;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
    pointer-events: none;
    cursor: text;
    color: #afafaf;
  }
  .material-form-field input {
    padding: 10px 0 10px 0;
    display: block;
    width: 100%;
    border: none;
    font-size: 14px;
    color: #000;
    border: 1px solid #c6c9d6;
    outline: none;
    padding-left: 16px !important;
  }
  .material-form-field input:invalid {
    outline: none;
    box-shadow: none;
  }
  .material-form-field input:valid ~ .material-form-field-label, .material-form-field input:focus ~ .material-form-field-label{
    top: 15px;
    left: 8px;
    font-size: 12px;
    background: white;
    padding: 1px 8px;
    color: #333;
  }
  .material-form-field input[readonly] ~ .material-form-field-label{
    top: 15px;
    left: 8px;
    font-size: 12px;
    background: white;
    padding: 1px 8px;
    color: #333;
  }
  .material-form-field input:focus {
    /* outline: none;
    color: #0070E0;
    padding-bottom: 8px;
    border-bottom-width: 3px;
    border-bottom-color: #0070E0; */
    border: 1px solid #0070E0;
  }
  .material-form-field input:focus ~ .material-form-field-label {
    color: #0070E0;
  }
  .material-form-field input:focus ~ .material-dropdown {
    /*
    If you want to animate this you will need to use some js to calculate it
    Optionally, you can simply display:block/none 
    */
    height: 228px;
    box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.2);
    transition: 0.2s ease-out height, step-start box-shadow 0.2s;
    -moz-transition: 0.2s ease-out height, step-start box-shadow 0.2s;
    -webkit-transition: 0.2s ease-out height, step-start box-shadow 0.2s;
  }
  .material-form-field.material-form-field-invalid {
    color: #d50000;
  }
  .material-form-field.material-form-field-invalid::after {
    content: attr(data-validationError);
  }
  .material-form-field.material-form-field-invalid input:focus ~ .material-form-field-label {
    color: #d50000;
  }
  
  .select {
      position: relative;
  }
  
  .select-text {
      position: relative;
      font-family: inherit;
      background-color: transparent;
      width: 100%;
      padding: 10px 10px 10px 0;
      font-size: 14px;
      border-radius: 0;
      border: none;
      border: 1px solid #c6c9d6;
  }
  
  /* Remove focus */
  .select-text:focus {
      outline: none;
      border: 1px solid #0070E0;
  }
  
      /* Use custom arrow */
  .select .select-text {
      appearance: none;
      -webkit-appearance:none;
      padding-left: 14px;
  }
  
  .select:after {
      position: absolute;
      top: 18px;
      right: 10px;
      /* Styling the down arrow */
      width: 0;
      height: 0;
      padding: 0;
      content: '';
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 6px solid rgba(0, 0, 0, 0.12);
      pointer-events: none;
  }
  
  
  /* LABEL ======================================= */
  .select-label {
      color: #afafaf;
      font-size: 14px;
      font-weight: normal;
      position: absolute;
      pointer-events: none;
      left: 0;
      top: 10px;
      transition: 0.2s ease all;
      padding-left: 14px;
  }
  
  /* active state */
  .select-text:focus ~ .select-label, .select-text:valid ~ .select-label {
    color: #333;
    top: -11px;
    transition: 0.2s ease all;
    font-size: 12px;
    background: white;
    padding: 1px 8px;
    left: 6px;
  }
  
  /* BOTTOM BARS ================================= */
  .select-bar {
      position: relative;
      display: block;
      width: 100%;
  }
  
  /* .select-bar:before, .select-bar:after {
      content: '';
      height: 2px;
      width: 0;
      bottom: 1px;
      position: absolute;
      background: #2F80ED;
      transition: 0.2s ease all;
  } */
  
  .select-bar:before {
      left: 50%;
  }
  
  .select-bar:after {
      right: 50%;
  }
  
  /* active state */
  .select-text:focus ~ .select-bar:before, .select-text:focus ~ .select-bar:after {
      width: 50%;
  }
  
  /* HIGHLIGHTER ================================== */
  .select-highlight {
      position: absolute;
      height: 60%;
      width: 100px;
      top: 25%;
      left: 0;
      pointer-events: none;
      opacity: 0.5;
  }