.combobox {
    display: block;

    &.input-group-sm .btn { .input-sm(); }
    &.input-group-lg .btn { .input-lg(); }
    &.input-group-nr > .form-control,
    &.input-group-nr > .btn {
        height: @input-height-base;
        padding:  @padding-base-vertical @padding-base-horizontal;
        font-size:  @font-size-base;
        line-height: @line-height-base;
    }

    &.input-group-nr > .form-control {
        padding-right: 7px + 2 * @padding-base-horizontal;
    }

    &.input-group-nr > .btn {
        &.dropdown-toggle {
            .caret {
                width: 7px;
                height: 7px;
                border: 0;
                background-repeat: no-repeat;
                background-position: @arrow-small-offset-x @arrow-small-offset-y;

                .background-ximage('@{common-image-path}/@{common-controls}', '@{common-image-path}/@{common-controls2x}', 100px)
            }

            &:active,
            &.active {
                .caret {
                    background-position: @arrow-small-offset-x @arrow-small-offset-y;
                }
            }
        }
    }

    .form-control {
        .border-right-radius(0);
        border-right: 0;
    }

    .btn {
        .border-left-radius(0) !important;
        border-left: 0;
        border-color: @input-border;
        background-color: transparent;
        margin-left: -1px;
        position: absolute;
        top: 0;
        right: 0;
    }

    .btn-default:hover,
    .btn-default:focus,
    .btn-default:active,
    .btn-default.active,
    &.open .dropdown-toggle.btn-default {
        background-color: @input-bg;
        border-color: @input-border;
    }

    li {
        a {
            white-space: pre;
        }

        &.selected {
            background-color: @primary;

            a {
                color: @dropdown-link-active-color;

                &:hover,
                &.hover {
                    background-color: @primary;
                }
            }
        }
    }

    // Font combobox
    // ------------------------
    li {
        &.selected {
            img {
                -webkit-filter: invert(100%) brightness(4);
                -moz-filter: invert(100%) brightness(4);
                -ms-filter: invert(100%) brightness(4);
                -o-filter: invert(100%) brightness(4);
                filter: invert(100%) brightness(4);
                filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='invert'><feColorMatrix in='SourceGraphic' type='matrix' values='-.1 0 0 0 1 0 -.1 0 0 1 0 0 -.1 0 1 0 0 0 1 0'/></filter></svg>#invert");
            }
        }

        &.divider:first-child {
            display: none;
        }
    }
}