combo-select.scss

@import "../../assets/scss/core/base";

$jigsaw-combo-select: #{$jigsaw-prefix}-combo-select;

.#{$jigsaw-combo-select}-host {
    @include inline-block;
    min-width: 240px;
    max-width: 100%;
}

.#{$jigsaw-combo-select} {
    position: relative;
    color: $text-color;
    font-size: $font-size-base;
    cursor: pointer;

    &-selection {
        border-radius: $border-radius-base;
        border: $border-width-base $border-style-base $border-color-base;
        background: $component-background;
        transition: all .3s $ease-in-out;
        user-select: none;
        padding: 0 30px 0 7px;
        &:hover {
            border-color: $primary-color;
            box-shadow: $box-focus-shadow;
        }
    }

    &-selection-rendered {
        min-height: $height-base;
        padding: 3px 0 0;
        overflow: hidden;
        font-size: 0;
        .jigsaw-tag-host {
            vertical-align: middle;
            margin-right: 4px;
            margin-bottom: 2px;
        }
        .jigsaw-input {
            height: $height-base - 6;
            line-height: $height-base - 6;
            input {
                padding: 0 !important;
                font-size: $font-size-base;
                border: none;
                &:focus, &:hover {
                    box-shadow: none;
                    border: none;
                }
            }
        }
    }

    &-placeholder {
        @include inline-block();
        font-size: $font-size-base;
        color: $text-color-secondary;
        padding-bottom: 3px;
        height: $height-base - 3;
        line-height: $height-base - 6;
    }

    &-disabled {
        @include compatible(color, $disabled-color, $disabled-color-ie11);
        pointer-events: none;
    }

    &-disabled &-placeholder {
        @include compatible(color, $disabled-color, $disabled-color-ie11);
    }

    &-disabled &-selection {
        background-color: $disabled-bg;
        cursor: not-allowed;

        &:hover, &:active, &:focus {
            border-color: $disabled-bg;
            box-shadow: none;
        }
    }

    &-content {
        position: absolute;
        width: 100%;
        z-index: $zindex-dropdown;
        overflow: hidden;

        margin-top: 3px;
        padding: 5px;

        border: $border-width-base $border-style-base $border-color-base;
        background: $default-color;
        box-shadow: $box-shadow-base;
        border-radius: $border-radius-base;

        @include opacity(0);
        @include prefixer(transition, all 0.3s $ease-in-out);
    }

    &-opened &-arrow {
        @include prefixer(transform, rotate(180deg));
    }

    &-arrow {
        position: absolute;
        top: 50%;
        right: 8px;
        transform-origin: 50% 20%;
        transform: translateY(-50%);
        transition: transform 0.3s $ease-in-out;
    }

    &-clear {
        position: absolute;
        top: 50%;
        right: 18px;
        width: 12px;
        transform: translateY(-50%);
        color: $text-color-secondary;
    }

    &-disabled &-clear {
        color: darken($disabled-bg, 8%);
    }

}