.bootstrap-select {
    margin-top: 15px;
    .dropdown-toggle {
        width: $input-min-width * $golden-ratio - 14px;
        @include font-normal;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        text-align: left;
        .caret {
            position: absolute;
            top: 14px;
            right: 12px;
        }
        .selected {
            width: calc(100% - 12px);
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        ~ .dropdown-menu {
            max-height: 200px;
            max-width: 100%;
            overflow: auto;
            .option-wrapper {
                padding-left: 5px;
                background-color: transparent;
                text-decoration: none;
                label {
                    @include font-normal;
                    padding-top: 2px;
                    padding-bottom: 2px;
                    padding-left: 0px;
                    font-size: $font-size-base;
                    &:hover {
                        background: transparent;
                    }
                    .option-label {
                        // margin-top: 100px;
                    }
                }
            }
        }
    }
}

.readonly .bootstrap-select .dropdown-toggle {
    opacity: 0.7;
}

.or[dir="rtl"] .bootstrap-select {
    .dropdown-toggle {
        text-align: right;
        .caret {
            margin-left: 0;
            margin-right: 10px;
            left: 12px;
            right: auto;
        }
    }
}

// extracted from bootstrap button-groups.scss:
//
// Button groups
// --------------------------------------------------

// Make the div behave like a button
.btn-group {
    position: relative;
    //display: inline-block;
    vertical-align: middle;
    // match .btn alignment given font-size hack above
    > .btn {
        position: relative;
        // Bring the "active" button to the front
        &:hover,
        &:focus,
        &:active,
        &.active {
            z-index: 2;
        }
        &:focus {
            // Remove focus outline when dropdown JS adds it after closing the menu
            //outline: none;

        }
    }
}

// On active and open, don't show outline

.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
    outline: 0;
}

// The clickable button for toggling the menu
// Remove the gradient and set the same inset shadow as the :active state
.btn-group.open .dropdown-toggle {
    @include box-shadow(inset 0 3px 5px rgba(0, 0, 0, 0.125));
    // Show no shadow for `.btn-link` since it has no other button styles.
    &.btn-link {
        @include box-shadow(none);
    }
}

// Reposition the caret
.btn .caret {
    margin-left: 0;
}