// This applies not only to the selector but also to the ec-work-state-picker.
material-list, .popup .item-group-list {
  background-color: var(--TWPT-drawer-background)!important;
}

material-list [group]:not(.empty) + *:not(script):not(template):not(.empty),
    .popup .item-group-list [group]:not(.empty) + *:not(script):not(template):not(.empty) {
  box-shadow: inset 0 8px 0 0 var(--TWPT-drawer-background)!important;
  border-top-color: #1f1f1f!important;
}

material-list material-select-item:hover,
    material-list material-select-item:focus,
    material-list material-select-dropdown-item:hover,
    material-list material-select-dropdown-item:focus,
    material-list material-select-dropdown-item.active,
    material-list material-select-dropdown-item:not(.multiselect).selected,
    material-select-searchbox:focus-within + material-list .single-select-item:first-of-type,
    .popup .item-group-list material-select-item:hover,
    .popup .item-group-list material-select-item:focus,
    .popup .item-group-list material-select-item.active,
    .popup .item-group-list material-select-dropdown-item:hover,
    .popup .item-group-list material-select-dropdown-item:focus,
    .popup .item-group-list material-select-dropdown-item.active,
    .popup .item-group-list material-select-dropdown-item:not(.multiselect).selected {
  background-color: var(--TWPT-highlighted-item-background)!important;
}

material-list .single-select-item,
    material-list .menu-item-label,
    material-list .label,
    material-list .text-segment,
    menu-item-groups .single-select-item,
    menu-item-groups .menu-item-label,
    menu-item-groups .label,
    menu-item-groups .text-segment {
  color: rgba(255, 255, 255, .87)!important;
}

.popup .item-group-list material-icon {
  color: rgba(255, 255, 255, .7)!important;
}

material-list [group] > [label] {
  color: #8a8a8a!important;
}

// This is shown in the new thread view
ec-forum-language-picker .labeled-select .select-label {
  color: var(--TWPT-secondary-text)!important;
}