@import '../../_widgetsCommon.scss';
.bolt-dropdown {
    border-radius: 4px;
    padding-top: $spacing-8;
}

.bolt-dropdown-list-box-container {
    max-height: 270px;
    padding-bottom: $spacing-8;
}

.bolt-dropdown .bolt-dropdown-list-box-container {
    overflow-x: hidden;
    overflow-y: auto;
}

.bolt-dropdown-container {
    outline: none;
}

.bolt-dropdown-filter {
    background: $transblack-6;
    border-radius: 2px;
    border: 0;

    .bolt-textfield-input {
        background: transparent;
    }
}

.bolt-dropdown-filter-container {
    padding-left: $spacing-8;
    padding-right: $spacing-8;
    padding-bottom: $spacing-8;
    border-bottom: 1px solid;
    border-bottom-color: $transblack-6;
}

.bolt-actions-container {
    border-top: 1px solid;
    border-top-color: $transblack-6;
    padding: $spacing-8;
    align-items: flex-start;
}

.bolt-dropdown-no-items {
    padding: $spacing-16 10px;
    color: $secondary-text;
    text-align: center;
}

.bolt-focus-visible .bolt-dropdown .bolt-table-row.focused {
    outline: none;
    @include box-shadow-focus-rect(true);
}

/// Apply to actions that should appear right aligned.
/// @group dropdown|actions
.bolt-dropdown-action-right-button {
    margin: $spacing-8 $spacing-4 0px 0px;
    align-self: flex-end;
}

.bolt-dropdown-expandable-textfield-input {
    text-align: left;
}

.bolt-dropdown-expandable-button-label {
    text-align: left;
}

.bolt-dropdown-filter-bar-item .bolt-dropdown-expandable-button-label {
    max-width: 340px;
    font-weight: $fontWeightNormal;

    .bolt-dropdown-filter-bar-item-selected-text {
        color: $primary-text;
    }
}

.bolt-dropdown-filter-bar-item-selected-text {
    font-weight: $fontWeightSemiBold;
}

.bolt-dropdown-filter-bar-item-placeholder {
    white-space: pre;
}

.bolt-dropdown-filter-bar-item.bolt-button {
    background: transparent;
    color: $secondary-text;
    height: 32px;
}

.bolt-dropdown.filter-bar-item-bolt-button .icon-right {
    font-size: $fontSizeM;
    font-weight: $fontWeightNormal;
    color: $secondary-text;
}

.bolt-dropdown-pivot.bolt-button.subtle {
    &:hover {
        background: transparent;
    }

    font-weight: $fontWeightNormal;
}

.bolt-dropdown-pivot-selected {
    border-bottom: 2px solid $communication-background;
    font-weight: $fontWeightSemiBold;
}