/*
Text inputs

Styles used for text inputs

<strong>Accessibility note:</strong> always use a label. If you do not want the label to be visible for sighted users, use the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" target="_blank">aria-label</a> or <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" target="_blank">aria-labelledby</a> property

Markup:
<input type="text" class="form-element__input" placeholder="Placeholder text..." aria-label="My Label here"></input>

Name: textInput

Styleguide 3.2
*/
input {
    // these cannot be combined into one line via "extend" because the browser will invalidate the whole line if it doesn't recognize one property
    &::-moz-placeholder {
        color: @color-placeholder-text !important;
        font-style: normal  !important;
    }

    &::-webkit-input-placeholder {
        color: @color-placeholder-text !important;
        font-style: normal  !important;
    }

    &:-ms-input-placeholder {
        color: @color-placeholder-text !important;
        font-style: normal  !important;
    }
}

input:hover:disabled {
    border-color: @color-form-input;
}

// Default styling for text inputs
.form-element__input {
    display: inline-block;
    height: 40px;
    width: 100%;
    padding: 10px 20px;
    vertical-align: baseline;
    border: 1px solid @color-border-input;
    box-sizing: border-box;
    border-radius: @border-radius-default;
    font-size: @font-size-base;
    line-height: 15px;
    color: @color-input;
    background-clip: padding-box;
    background-color: #FFFFFF;

    &:hover {
        border-color: @color-border-input-hover;
    }

    &:focus {
        outline: 0;
        border-color: @color-buildium-green;
    }

    &[readonly="readonly"], //Report search
    &:disabled {
        opacity: @opacity-disabled;
        cursor: not-allowed;
    }
}

.form-element__input--textarea {
    height: auto;
    resize: vertical;
}

// The multi-line styles should be consolidated to a single modifier once the FF goes live.
// Leaving these like this as a reminder to clean them up.
.form-element__input--multiline-first,
.form-element__input--multiline-middle {
    display: block;
    margin-bottom: 5px;
}

.form-element__input--multiline-last {
    display: block;
}

.form-element__input--width-100-percent {
    width: 100% !important;
}

.form-element__input--width-extra-small {
    width: 25%;
}

.form-element__input--combobox {
    border-radius: @border-radius-default 0 0 @border-radius-default;
    text-overflow: ellipsis;
}

.form-element__input--cc-exp {
    width: @cc-exp-width !important;
}

// Legacy "combobox" used in 4 places
.form-element__input--text-dropdown-list {
    width: @legacy-width-size2 !important;
}

.form-element__input--multi-select {
    padding-left: 35px;
    border-top: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    border-radius: @border-radius-default @border-radius-default 0 0;

    &::-ms-clear { // Hide IE/Edge clear icon
        display: none;
    }
}

.form-element__input--icon {
    padding-left: 35px;
}

.form-element__input--account-number {
    padding-left: 20px !important;
}

.form-element__input--search {
    .form-element__input--icon;
    .svgicon--search-grey;
    background-position: 10px center;
}

.form-element--icon {
    padding-left: 20px;
}

//Fill up grid cell
.form-element__datepicker--full-width {
    width: 100% !important;
}

// This essentially hides the input so we can style the label to look like a button
.form-element__file-input {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

// Unstyled selects need this
select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    .svgicon--icons-chevron-down-grey;
    background-position: right 10px center;
    padding-right: 30px !important;

    &:hover {
        cursor: pointer;
    }
}

select[multiple] {
    min-width: 240px;
    padding: 10px;
    background-image: none;
    border: 1px solid @color-border-input;
    border-radius: @border-radius-default;
    overflow-y: scroll;

    &:hover {
        border-color: @color-border-input-hover;
    }

    &:focus {
        outline: 0;
        border-color: @color-buildium-green;
    }
}

select::-ms-expand {
    display: none;
}

select[disabled] {
    &:hover {
        cursor: not-allowed;
        border: 1px solid @color-border-input;
    }
}

option {
    color: @color-default-text;
}

// Taken from https://stackoverflow.com/questions/38663578/how-to-hide-autofill-safari-icon-in-input-field
input::-webkit-contacts-auto-fill-button {
    visibility: hidden;
    display: none !important;
    pointer-events: none;
    position: absolute;
    right: 0;
}

.form-element__input--no-border {
    border: 0 !important;
    box-shadow: none !important;
}

.form-element__input--no-left-padding {
    padding-left: 0;
}