//
// Balloon selector
// --------------------------------------------------

@color-balloon-control-default-text:         #ffffff;
@color-balloon-control-default-bg:           #bcc3c7;
@color-balloon-control-hover-bg:             #0181b9;
@color-balloon-control-active-bg:            #da5700;

.control-balloon-selector {
    ul {
        padding: 0;

        // Offset the item top margin
        margin-top: -5px;

        li {
            list-style: none;
            display: inline-block;
            padding: 6px 7px 5px;
            margin-right: 5px;
            margin-top: 6px;
            text-transform: uppercase;
            background: @color-balloon-control-default-bg;
            color: @color-balloon-control-default-text;
            font-size: 10px;
            line-height: 100%;
            .border-radius(@border-radius-base);
            .transition(all 0.1s ease);

            &.active {
                background: @color-balloon-control-active-bg !important;
            }
        }
    }

    &.control-disabled {
        .opacity(0.5);
    }

    &:not(.control-disabled) ul {
        li:hover {
            background: @color-balloon-control-hover-bg;
            cursor: pointer;
        }
    }
}

.form-group {
    .control-balloon-selector ul {
        margin-bottom: 0;
    }
}