/* Select Field
   ========================================================================== */

   select.cc,.six-storage-datepicker-modal select { display: none; }
   select.browser-default { display: block; }
   
   select {
     background-color: $select-background;
     width: 100%;
     padding: $select-padding;
     border: $select-border;
     border-radius: $select-radius;
     height: $input-height;
   }
   
   .six-storage-select-label {
     position: absolute;
   }
   
   .six-storage-select-wrapper {
     &.six-storage-valid .six-storage-helper-text[data-success],
     &.six-storage-invalid ~ .six-storage-helper-text[data-error] {
       @extend %hidden-text;
     }
   
     &.six-storage-valid {
       & > input.six-storage-select-dropdown {
         @extend %valid-input-style;
       }
   
       & ~ .six-storage-helper-text:after {
         @extend %custom-success-message;
       }
     }
   
     &.six-storage-invalid {
       & > input.six-storage-select-dropdown,
       & > input.six-storage-select-dropdown:focus {
         @extend %invalid-input-style;
       }
   
       & ~ .six-storage-helper-text:after {
         @extend %custom-error-message;
       }
     }
   
     &.six-storage-valid + label,
     &.six-storage-invalid + label {
       width: 100%;
       pointer-events: none;
     }
   
     & + label:after {
       @extend %input-after-style;
     }
   
     position: relative;
   
     input.six-storage-select-dropdown {
       &:focus {
         border-bottom: 1px solid $input-focus-color;
         background-image: unset;
       }
       position: relative;
       cursor: pointer;
       background-color: transparent ;
       border: none;
       border-bottom: $input-border;
       outline: none;
       height: $input-height;
       line-height: $input-height;
       width: 100%;
       font-size: $input-font-size;
       margin: 0;
       padding: 0;
       display: block;
       user-select:none;
       z-index: 1;
       border-radius: 0px;
     }
   
     .six-storage-caret {
       position: absolute;
       right: 0;
       top: 0;
       bottom: 0;
       margin: auto 0;
       z-index: 0;
       fill: rgba(0,0,0,.87);
     }
   
     & + label {
       position: absolute;
       top: -26px;
       font-size: $label-font-size;
       font-weight: 600;
     }
   }
   
   // Disabled styles
   select:disabled {
     color: $input-disabled-color;
   }
   
   .six-storage-select-wrapper.six-storage-disabled {
     + label {
       color: $input-disabled-color;
     }
     .six-storage-caret {
       fill: $input-disabled-color;
     }
   }
   
   .six-storage-select-wrapper input.six-storage-select-dropdown:disabled {
     color: $input-disabled-color;
     cursor: default;
     user-select: none;
   }
   
   .six-storage-select-wrapper i {
     color: $select-disabled-color;
   }
   
   .six-storage-select-dropdown li.six-storage-disabled,
   .six-storage-select-dropdown li.six-storage-disabled > span,
   .six-storage-select-dropdown li.optgroup {
     color: $select-disabled-color;
     background-color: transparent;
   }
   
   body.six-storage-keyboard-focused {
     .six-storage-select-dropdown.six-storage-dropdown-content li:focus {
       background-color: $select-option-focus;
     }
   }
   
   .six-storage-select-dropdown.six-storage-dropdown-content {
     li {
       &:hover {
         background-color: $select-option-hover;
       }
   
       &.six-storage-selected {
         background-color: $select-option-selected;
       }
     }
   }
   
   // Prefix Icons
   .six-storage-prefix ~ .six-storage-select-wrapper {
     margin-left: 3rem;
     width: 92%;
     width: calc(100% - 3rem);
   }
   
   .six-storage-prefix ~ label { margin-left: 3rem; }
   
   // Icons
   .six-storage-select-dropdown li {
     img {
       height: $dropdown-item-height - 10;
       width: $dropdown-item-height - 10;
       margin: 5px 15px;
       float: right;
     }
   }
   
   // Optgroup styles
   .six-storage-select-dropdown li.optgroup {
     border-top: 1px solid $dropdown-hover-bg-color;
   
     &.six-storage-selected > span {
       color: rgba(0, 0, 0, .7);
     }
   
     & > span {
       color: rgba(0, 0, 0, .4);
     }
   
     & ~ li.six-storage-optgroup-option {
       padding-left: 1rem;
     }
   }