/* Select Field

========================================================================== */

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;

}

.select-label {

position: absolute;

}

.select-wrapper {

position: relative;

input.select-dropdown {
  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: $input-margin;
  padding: 0;
  display: block;
}

span.caret {
  color: initial;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  height: 10px;
  margin: auto 0;
  font-size: 10px;
  line-height: 10px;

  &.disabled {
    color: $input-disabled-color;
  }
}

& + label {
  position: absolute;
  top: -14px;
  font-size: $label-font-size;
}

}

// Disabled styles select:disabled {

color: rgba(0,0,0,.3);

}

.select-wrapper input.select-dropdown:disabled {

color: rgba(0,0,0,.3);
cursor: default;
-webkit-user-select: none; /* webkit (safari, chrome) browsers */
-moz-user-select: none; /* mozilla browsers */
-ms-user-select: none; /* IE10+ */
border-bottom: 1px solid rgba(0,0,0,.3);

}

.select-wrapper i {

color: $select-disabled-color;

}

.select-dropdown li.disabled, .select-dropdown li.disabled > span, .select-dropdown li.optgroup {

color: $select-disabled-color;
background-color: transparent;

}

// Prefix Icons .prefix ~ .select-wrapper {

margin-left: 3rem;
width: 92%;
width: calc(100% - 3rem);

}

.prefix ~ label { margin-left: 3rem; }

// Icons .select-dropdown li {

img {
  height: $dropdown-item-height - 10;
  width: $dropdown-item-height - 10;
  margin: 5px 15px;
  float: right;
}

}

// Optgroup styles .select-dropdown li.optgroup {

border-top: 1px solid $dropdown-hover-bg-color;

&.selected > span {
  color: rgba(0, 0, 0, .7);
}

& > span {
  color: rgba(0, 0, 0, .4);
}

& ~ li.optgroup-option {
  padding-left: 1rem;
}

}