@import "../ui.vars.less";

sc-icon-input {
    height: 48px;
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
    background-color: @appWhite;
    padding: 7px;
    padding-left: 10px;
    border: 1px solid @scLightGray;
    cursor: pointer;
    input {
        border: none!important;
        outline: none;
        padding: 0px;
        width: 100%;
        font-size: 0.875rem;
        line-height: 1.25rem;
        box-shadow: unset !important;
    }
    & fa-icon {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
    &[date-picker]{
        max-width: 160px;
    }
    &[multi-left] {
        border-radius: 8px 0px 0px 8px;
        border-right: none;
    }
    &[multi-right] {
        border-radius: 0px 8px 8px 0px;
    }
    &[multi-component] {
        height: 48px;
        & input {
            max-height: 34px;
            padding-left: 0px;
        }
    }
    &[small] {
        padding-left: 4px;
        max-height: 36px;
        & fa-icon {
            margin-left: 4px;
        }
        & input {
            max-height: 34px;
            font-size: 0.75rem !important;
        }
    }
    &:focus-within{
        border: 1px solid @scAction;
        & fa-icon {
            color: @scAction;
        }
    }
    &[error] {
        border: 1px solid @scNegative;
    }
    &[selected]:not([disabled]) {
        border: 1px solid @scAction;
        box-shadow: 0px 0px 0px 3px @scActionBackground;
        & fa-icon {
            color: @appBlack !important;
            width: 16px !important;
        }
    }
    &[disabled] {
        cursor: not-allowed!important;
        pointer-events:none;
        color: @text-300;
        background-color: @scBackground;
        border: 1px solid @scInactive;
        & input, span, fa-icon {
            color: @text-300;
        }
        &[error] {
          border: 1px solid @scNegative !important;
        }
    }
}