.multiselect-input {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    width: $dropdown-button-min-width;
    padding: $multiselect-padding;
    border-radius: $border-radius;

    @extend .mod-border-transparency-4;
}

.select-dropdown.mod-multi .select-dropdown-button + .select-dropdown-container {
    margin-top: $multiselect-dropdown-margin;
}

.multiselect-add {
    width: 100%;
}

.multiselect-selected {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
}

.selected-options-container {
    display: inline-flex;
    flex-flow: row wrap;
    margin-bottom: $spacing;

    .selected-option,
    .sortable-selected-option {
        margin: 0 $dropdown-multiselect-margin $dropdown-multiselect-margin 0;
    }

    &.readOnly {
        .selected-option,
        .multiselect-empty,
        .sortable-selected-option:last-child {
            margin-bottom: 0;
        }
    }
}

.multiselect-input.mod-sortable .selected-options-container {
    flex-flow: column nowrap;
    align-items: flex-start;

    .selected-option {
        margin: 0;
    }
}

.multiselect-empty {
    color: var(--deprecated-medium-grey);
    line-height: $button-small-height + 2 * $button-border-width;
}

.remove-all-selected-options {
    align-self: flex-start;
    padding: $dropdown-multiselect-items-margin;
}

.remove-all-selected-options:hover {
    cursor: pointer;
}