.filter > .form-group .field .selectize-control,
.selectize-control.input-sm.form-control {
    &.multi {
        .selectize-input {
            font-size: var(--font-size-small);
            padding: var(--2px) var(--7px) 0;

            > .item {
                margin: 0 var(--3px) var(--2px) 0;
            }

            > input {
                padding-top: var(--1px) !important;
            }

            min-height: var(--input-height-small);
        }

        padding: 0;
    }

    &.single {
        .selectize-input {
            font-size: var(--font-size-small);
            padding: var(--padding-small-vertical) var(--19px) var(--padding-small-vertical) var(--padding-small-horizontal);
            min-height: var(--input-height-small);
            max-height: var(--input-height-small);
        }

        height: var(--input-height-small);
    }

    .selectize-dropdown-content {
        max-height: calc(var(--220px) + var(--14px));
    }
}

.selectize-dropdown {
    min-width: var(--80px);

    .selectize-dropdown-content {
        > .option {
            cursor: default;
        }

        max-height: calc(var(--256px) + var(--6px));
    }

    margin-top: 0;
    user-select: none;
}

.form-control.selectize-control.single {
    height: var(--input-height-base);
}

.selectize-control {
    &.single {
        > .selectize-input {
            > .item {
                width: 100%;
                overflow: hidden;
                vertical-align: top;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            cursor: default;
        }
    }

    .selectize-dropdown {
        z-index: 1031;
    }
}

.selectize-control.multi .selectize-input {
    > div {
        border-radius: var(--border-radius);
        padding: var(--1px) var(--4px);

        &:not(.active) {
            &.primary {
                > span {
                    color: var(--state-primary-text);
                }
            }

            &.warning {
                > span {
                    color: var(--state-warning-text);
                }
            }

            &.danger {
                > span {
                    color: var(--state-danger-text);
                }
            }

            &.info {
                > span {
                    color: var(--state-info-text);
                }
            }

            &.success {
                > span {
                    color: var(--state-success-text);
                }
            }

            &.soft {
                > span {
                    color: var(--gray-soft);
                }
            }
        }
    }
}

.selectize-control.single {
    .selectize-dropdown {
        position: absolute;
    }

    .selectize-input {
        padding-right: var(--19px);

        //height: var(--line-height-base);
        max-height: var(--input-height-base);

        &.dropdown-active:after,
        &:after {
            color: var(--text-muted-color);
            display: inline-block;
            width: 0;
            height: 0;
            top: var(--16px);
            right: var(--8px);
            margin-left: var(--2px);
            vertical-align: middle;
            border-top: var(--4px) dashed;
            border-right: var(--4px) solid transparent;
            border-left: var(--4px) solid transparent;
            position: absolute;
        }

        > .item {
            //display: block;
            //vertical-align: middle;
        }

        > .item + input {
            caret-color: transparent;
            margin-right: var(--minus-4px) !important; // Prevent select changing width on focus.
        }
    }

    &.input-sm {
        .selectize-input {
            height: var(--line-height-small);
            line-height: var(--line-height-small);

            &.dropdown-active:after,
            &:after {
                top: var(--13px);
            }

            > .item {
                line-height: var(--line-height-small);

                // Prevents height added.
                vertical-align: bottom;
            }
        }
    }
}

.selectize-dropdown .active {
    &.text-success {
        color: var(--state-success-text);
    }
    &.text-danger {
        color: var(--state-danger-text);
    }
    &.text-warning {
        color: var(--state-warning-text);
    }
    &.text-warning {
        color: var(--state-warning-text);
    }
    &.text-info {
        color: var(--state-info-text);
    }
    &.text-primary {
        color: var(--state-primary-text);
    }
}
