/**
 * These styles determine the layout of this component and will always be applied
 * 
 * select-container
 * select-input-container
 * select-dropdown-container
 * select-label
 * select-input
 * select-dropdown-item
 * select-dropdown-selected
 * select-dropdown-matched
 */


.select-container {
    width: 100%;
    position: relative;
}

.select-input-container {
    cursor: text;
}

.select-input-container > div {
    display: inline-block;
    vertical-align: middle;
}

.select-label {
    display: inline-block;
    cursor: default;
}

.select-label > div {
    display: inline-block;
}

.select-label > div:last-child {
    cursor: pointer;
}

.select-input {
    display: inline-block;
    border: none;
    outline: none;
}

.select-dropdown {
    position: absolute;
    left: 0px;
    right: 0px;
    z-index: 9999;
    cursor: default;
}

/**
 * Default styles
 */

.select-container.default {

    padding-left: 4px;
    border: 1px solid #D1D1D1;
    border-radius: 2px;
    

    color: #777;
}

.select-input-container.default {
    padding-left: 6px;
}

.select-label.default {
    margin: 2px 4px 2px -2px;

    border: 1px solid #DDD;
    border-radius: 2px;

}

.select-label.default:hover {
    box-shadow: 0 0 3px #DDD;
}

.select-label.default > div {
    padding: 0 4px;
    cursor: default;
}

.select-label.default > div:last-child {
    border-left: 1px solid #DDD;
    color: #CCC;
    cursor: pointer;
}

.select-label.default > div:last-child:hover {
    color: #999;
    box-shadow: 0 0 2px #BBB;   
}

.select-input.default {
    margin-left: -2px;
    padding: 6px 0;
}


.select-dropdown.default {
    margin-top: 1px;
    background-color: white;
    outline: 1px solid #CCC;
    box-shadow: 0 2px 3px #DDD;

    overflow-y: auto;
    overflow-x: hidden;
    max-height: 200px;
}

.select-dropdown-item.default {
    padding: 4px 8px;
}

.select-dropdown-item.default.selected {
    background-color: #DEDEDE;
    color: black;
    outline: 1px solid white;
}


input.select-input-disabled.default {
  width: 100%;
  padding: 6px 10px;
  margin-bottom: 6px;
  
  border: 1px solid #D1D1D1;
  background-color: #EFEFEF;
  border-radius: 2px;
  box-sizing: border-box;
}