@import '../inputs';

/**************************************
 * Forms
 **************************************/

/* Inputs */

input[type='text'],
input[type='password'],
input[type='search'],
input[type='email'],
input[type='url'],
input[type='tel'],
input[type='number'],
div[contentEditable='true'],
textarea {
    width: 262px;

    @include box-inputs;
}

input[type='text']:hover,
input[type='password']:hover,
input[type='search']:hover,
input[type='email']:hover,
input[type='url']:hover,
input[type='tel']:hover,
input[type='number']:hover,
div[contentEditable='true']:hover,
textarea:hover {
    @include box-inputs-hover;
}

input[type='text']:focus,
input[type='password']:focus,
input[type='search']:focus,
input[type='email']:focus,
input[type='url']:focus,
input[type='tel']:focus,
input[type='number']:focus,
div[contentEditable='true']:focus,
textarea:focus {
    @include box-inputs-focus;
}

input::-webkit-input-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder {
    color: $bdl-gray-20;
}

input[type='text'].is-invalid,
input[type='password'].is-invalid,
input[type='search'].is-invalid,
input[type='email'].is-invalid,
input[type='url'].is-invalid,
input[type='tel'].is-invalid,
input[type='number'].is-invalid,
div[contentEditable='true'].is-invalid,
textarea.is-invalid {
    border: 1px solid $bdl-watermelon-red;
}

input[type='text'].is-invalid:focus,
input[type='password'].is-invalid:focus,
input[type='search'].is-invalid:focus,
input[type='email'].is-invalid:focus,
input[type='url'].is-invalid:focus,
input[type='tel'].is-invalid:focus,
input[type='number'].is-invalid:focus,
div[contentEditable='true'].is-invalid:focus,
textarea.is-invalid:focus {
    border: 1px solid #f44;
}

input[type='text']:disabled,
input[type='password']:disabled,
input[type='search']:disabled,
input[type='email']:disabled,
input[type='url']:disabled,
input[type='tel']:disabled,
input[type='number']:disabled,
div[contentEditable='true']:disabled,
textarea:disabled {
    color: $bdl-gray-30;
    background-color: $bdl-gray-02;
    border-color: $bdl-gray-10;
    box-shadow: none;

    &:hover {
        border-color: $bdl-gray-10;
    }
}

/* safari does't treat search input like a normal textfield */
input[type='search'] {
    -webkit-appearance: textfield;

    &::-webkit-search-cancel-button,
    &::-webkit-search-results-button {
        display: none;
    }
}

/* IE10+ adds a new x to the inputs to clear it, hiding it for now */
input::-ms-clear {
    display: none;
}

textarea {
    vertical-align: top;
}

.input-x-small,
.input-x-small[type] {
    width: 100px;
}

.input-small,
.input-small[type] {
    width: 150px;
}

.input-medium,
.input-medium[type] {
    width: 300px;
}

.input-large,
.input-large[type] {
    width: 375px;
}

.input-x-large,
.input-x-large[type] {
    width: 475px;
}

.input-full,
.input-full[type] {
    width: 100%;
}

/* Note: Only useful for labels that do not wrap their target input */
.label-sep::after {
    content: ':';
}

/* Select component with container */

.select-container select,
.select-container .bdl-SelectButton,
.select-container .select-button {
    position: relative;
    z-index: 1; /* captures click */
    display: inline-block;
    width: 100%;
    height: 34px;
    padding: 5px 0 5px 10px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.select-container select {
    padding-right: 25px;
    color: $bdl-gray;
    background: none;
    border: none;
}

.select-container .bdl-SelectButton:disabled,
.select-container .select-button:disabled,
.select-container select:disabled {
    cursor: default;
}

.select-container {
    position: relative;
    display: inline-block;
}

.select-container .bdl-SelectButton,
.select-container .select-button,
.select-container .select-container-inner {
    display: inline-block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-align: left;
    text-overflow: ellipsis;
    vertical-align: top;
}

.select-container .select-overlay {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.select-container .select-overlay,
.select-container .bdl-SelectButton,
.select-container .select-button {
    background-color: $white;
    border: 1px solid $bdl-gray-20;
    border-radius: 2px;
    box-shadow: 0 1px 1px 1px rgba(0, 0, 0, .05);
    -webkit-transition: border-color linear .15s, box-shadow linear .1s;
    transition: border-color linear .15s, box-shadow linear .1s;
}

.select-container .select-overlay::before,
.select-container .bdl-SelectButton::before,
.select-container .select-button::before {
    position: absolute;
    top: 15px;
    right: 11px;
    width: 0;
    height: 0;
    border-top: 3px solid $bdl-gray-80;
    border-right: 3px solid transparent;
    border-left: 3px solid transparent;
    transition: transform $bdl-transitionDurationBase;
    content: '';
}

.select-container .bdl-SelectButton[aria-expanded='true']::before,
.select-container .select-button[aria-expanded='true']::before {
    transform: rotateZ(180deg);
}

.select-container .bdl-SelectButton,
.select-container .select-button {
    padding-right: 25px;
    color: $bdl-gray;
}

.select-container .bdl-SelectButton:focus,
.select-container .select-button:focus,
.select-container select:focus {
    outline: none;
}

.select-container .bdl-SelectButton:focus,
.select-container .select-button:focus,
.select-container select:focus ~ .select-overlay {
    border: 1px solid $primary-color;
}

.select-container .bdl-SelectButton:hover,
.select-container .select-button:hover,
.select-container select:hover ~ .select-overlay {
    border: 1px solid #4c4c4c;
    box-shadow: 0 1px 1px 1px rgba(0, 0, 0, .1);
}

.select-container .bdl-SelectButton:disabled,
.select-container .select-button:disabled,
.select-container select:disabled {
    color: $bdl-gray-30;
}

.select-container .bdl-SelectButton:disabled,
.select-container .select-button:disabled,
.select-container select:disabled ~ .select-overlay {
    background-color: $bdl-gray-02;
    border-color: $bdl-gray-10;
    box-shadow: none;
}

.select-container .bdl-SelectButton:disabled:hover,
.select-container .select-button:disabled:hover,
.select-container select:disabled:hover ~ .select-overlay {
    box-shadow: none;
}

.select-container .bdl-SelectButton:disabled::before,
.select-container .select-button:disabled::before,
.select-container select:disabled ~ .select-overlay::before {
    border-top: 3px solid #d5d5d5;
}

.select-container.is-invalid select + .select-overlay,
.select-container.is-invalid .bdl-SelectButton:focus ~ .select-overlay,
.select-container.is-invalid .select-button:focus ~ .select-overlay,
.select-container.is-invalid select:focus ~ .select-overlay,
.select-container.is-invalid select:hover + .select-overlay {
    border: 1px solid $bdl-watermelon-red;
}

.select-container .bdl-SelectButton:active,
.select-container .select-button:active {
    background-color: $bdl-gray-10;
}

.select-container-x-small {
    width: 50px;
}

.select-container-small {
    width: 100px;
}

.select-container-medium {
    width: 200px;
}

.select-container-large {
    width: 262px;
}

.select-container-x-large {
    width: 345px;
}

.select-container.huge {
    width: 500px;
}

/* Disable any IE specific styling for Select elements */
select::-ms-expand {
    display: none;
}