// overrides default styles of CMSSelectableToggleButton control specified in dropdowns.less, so persona images can be displayed next to the dropdown items

@button-image-size: @btn-line-height - 2 * @btn-shadow-width;
@dropdown-item-image-size: @line-height-100 + 2 * @padding-small-horizontal;

.personas-selectable-button {
    .persona-main-button {
        background-position: @btn-shadow-width @btn-shadow-width;
        background-repeat: no-repeat;
        background-size: @button-image-size @button-image-size;
        padding-left: @button-image-size + @base-unit * 0.5;
    }

    .dropdown-menu > li > a {
        &.persona-dropdown-item {
            background-repeat: no-repeat;
            background-size: @dropdown-item-image-size @dropdown-item-image-size;
            background-position: left center;
            padding-left: @dropdown-item-image-size + @base-unit * 0.5;
        }
    }
}