@use "../../mixins";

/**
 * Copyright JS Foundation and other contributors, http://js.foundation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 **/

.red-ui-typedInput-container {
    border: 1px solid var(--red-ui-form-input-border-color);
    border-radius: 5px;
    height: 34px;
    line-height: 14px;
    display: inline-flex;
    padding: 0;
    margin: 0;
    vertical-align: middle;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    &[disabled] {
        input, button {
            background: var(--red-ui-secondary-background-inactive);
            pointer-events: none;
            cursor: not-allowed;
        }
    }

    .red-ui-typedInput-input-wrap {
        flex-grow: 1;
    }
    input.red-ui-typedInput-input {
        width: 100%;
        padding: 0 0 0 3px;
        margin:0;
        height: 32px;
        border:none;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        box-shadow: none;
        vertical-align: middle;
    }

    &.red-ui-typedInput-focus:not(.input-error) {
        border-color: var(--red-ui-form-input-focus-color) !important;
    }
    .red-ui-typedInput-value-label {
        flex-grow: 1;
        display: inline-block;
        height: 32px;
        box-sizing: border-box;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        .red-ui-typedInput-value-label-inactive {
            background: var(--red-ui-secondary-background-disabled);
            color: var(--red-ui-secondary-text-color-disabled);
        }
    }
}
.red-ui-typedInput-options {
    @include mixins.component-shadow;
    font-family: var(--red-ui-primary-font);
    font-size: var(--red-ui-primary-font-size);

    position: absolute;
    max-height: 350px;
    overflow-y: auto;
    border: 1px solid var(--red-ui-primary-border-color);
    box-sizing: border-box;
    background: var(--red-ui-secondary-background);
    white-space: nowrap;
    z-index: 2000;
    a {
        padding: 6px 18px 6px 6px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid var(--red-ui-secondary-border-color);
        color: var(--red-ui-form-text-color);
        &:hover {
            text-decoration: none;
            background: var(--red-ui-workspace-button-background-hover);
        }
        &:focus {
            text-decoration: none;
            background: var(--red-ui-workspace-button-background-active);
            outline: none;
        }
        &:active {
            text-decoration: none;
            background: var(--red-ui-workspace-button-background-active);
        }
        input[type="checkbox"] {
            margin: 0 6px 0 0;
        }
    }
    .red-ui-typedInput-icon {
        margin-right: 6px;
        &:not(.fa) {
            -webkit-mask-size: cover;
            mask-size: cover;
            -webkit-mask-position: center;
            mask-position: center;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            background-color: var(--red-ui-primary-text-color);
            height: 14px;
            width: 12px;
        }
    }
}
button.red-ui-typedInput-type-select,
button.red-ui-typedInput-option-expand,
button.red-ui-typedInput-option-trigger
 {
    text-align: left;
    border: none;
    flex-basis: auto;
    box-sizing: border-box;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    padding: 0 1px 0 5px;
    background: var(--red-ui-form-button-background);
    height: 32px;
    line-height: 30px;
    vertical-align: middle;
    color: var(--red-ui-form-text-color);
    white-space: nowrap;
    i.red-ui-typedInput-icon {
        margin-left: 1px;
        margin-right: 2px;
        vertical-align: middle;
    }
    &.disabled {
        cursor: default;
        > i.red-ui-typedInput-icon {
            color: var(--red-ui-secondary-text-color-disabled);
        }
    }
    .red-ui-typedInput-type-label,.red-ui-typedInput-option-label {
        display: inline-block;
        vertical-align: middle;
        height: 100%;
        padding: 0 1px 0 5px;
        img {
            max-width: none;
        }
        .red-ui-typedInput-icon:not(.fa) {
            display: inline-block;
            -webkit-mask-size: cover;
            mask-size: cover;
            -webkit-mask-position: center;
            mask-position: center;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            background-color: var(--red-ui-primary-text-color);
        }
    }

    &:not(.disabled):hover {
        text-decoration: none;
        background: var(--red-ui-workspace-button-background-hover);
    }
    &:focus {
        text-decoration: none;
        outline: none;
        box-shadow: inset 0 0 0 1px var(--red-ui-form-input-focus-color);
    }
    &:not(.disabled):active {
        background: var(--red-ui-workspace-button-background-active);
        text-decoration: none;
    }
    &.red-ui-typedInput-full-width {
        flex-grow: 1;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }
    &:before {
        content:'';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }
}
button.red-ui-typedInput-option-expand {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

button.red-ui-typedInput-option-trigger {
    border-left: 1px solid var(--red-ui-form-input-border-color);
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    padding: 0 0 0 0;
    position:relative;
    flex-grow: 1;
    line-height: 32px;
    display: inline-flex;
    .red-ui-typedInput-option-label {
        background:var(--red-ui-form-button-background);
        color: var(--red-ui-form-text-color);
        flex-grow: 1;
        padding: 0 0 0 8px;
        display:inline-block;
    }
    .red-ui-typedInput-option-caret {
        flex-grow: 0;
        display:inline-block;
        width: 23px;
        text-align: center;
        height: 100%;
        &:before {
            content:'';
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }
    }
    &:focus {
        box-shadow: none;
    }
    &:focus .red-ui-typedInput-option-caret {
        box-shadow: inset 0 0 0 1px var(--red-ui-form-input-focus-color);
    }
}
