@form-input-width: @base-unit * 20;

.selected-icon {
    display: inline-block;

    .form-control {
        width: @form-input-width - (@base-unit * 2);
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
        border-right: none;
        margin-right: 0;
        float: left;
    }

    .btn {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;

        i {
            width: @base-unit;
            display: inline-block;
        }
    }
}

.popup-icon-selector {
    @icon-border-width: 2px;
    @icon-popup-border-width: 2px;
    @icon-popup-padding: @base-unit * 0.25;
    @icon-width: (@base-unit * 2) + (@icon-padding * 2) + (@icon-border-width * 2);
    @icon-padding: @base-unit * 0.25;
    @scrollbar-width: @base-unit + 2px;

    display: none;
    position: absolute;
    overflow-y: scroll;
    width: (@icon-width * 7) + (@icon-popup-padding * 2) + (@icon-popup-border-width * 2) + @scrollbar-width;
    height: (@icon-width * 7) + (@icon-popup-padding * 2) + (@icon-popup-border-width * 2);
    padding: @icon-popup-padding;
    margin-top: @base-unit * 0.25;
    border: @icon-popup-border-width solid @color-gray-130;
    border-radius: @border-radius-large;
    box-sizing: border-box;
    box-shadow: 2px 2px 8px -3px @btn-default-box-shadow;
    background-color: @color-white;
    z-index: 10000;
    
    .no-icons {
        display: none;
        padding-left: @base-unit * 0.5;
    }

    i {
        padding: @icon-padding;
        font-size: @base-unit * 2;
        cursor: pointer;
        border: @icon-border-width solid @color-white;
        margin: 0;

        &:hover {
            background-color: @color-gray-100;
            border-radius: @border-radius-large;
            border-color: @color-gray-100;
        }
    }
}