@syncfusion/react-splitbuttons/styles/drop-down-button/material3.css

A package of feature-rich React components such as DropDownButton, SplitButton.

.sf-dropdown-btn,
.sf-dropdown-btn.sf-btn {
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
}
.sf-dropdown-btn.sf-outline, .sf-dropdown-btn.sf-standard,
.sf-dropdown-btn.sf-btn.sf-outline,
.sf-dropdown-btn.sf-btn.sf-standard {
  box-shadow: none;
}
.sf-dropdown-btn.sf-caret-hide .sf-caret,
.sf-dropdown-btn.sf-btn.sf-caret-hide .sf-caret {
  display: none;
}
.sf-dropdown-btn.sf-drp-btn-sm svg,
.sf-dropdown-btn.sf-btn.sf-drp-btn-sm svg {
  width: 16px;
  height: 16px;
}
.sf-dropdown-btn.sf-drp-btn-me svg,
.sf-dropdown-btn.sf-btn.sf-drp-btn-me svg {
  width: 18px;
  height: 18px;
}
.sf-dropdown-btn.sf-drp-btn-la svg,
.sf-dropdown-btn.sf-btn.sf-drp-btn-la svg {
  width: 20px;
  height: 20px;
}
.sf-dropdown-popup {
  background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
  color: rgb(var(--color-sf-on-surface));
  position: absolute;
}
.sf-dropdown-popup ul {
  border-radius: 4px;
  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  margin: 0;
  overflow: hidden;
  user-select: none;
  white-space: nowrap;
}
.sf-dropdown-popup ul .sf-item {
  cursor: pointer;
  display: flex;
}
.sf-dropdown-popup ul .sf-item.sf-separator {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  height: auto;
  margin: 3px 0;
  border-bottom-color: rgb(var(--color-sf-outline-variant));
}
.sf-dropdown-popup ul .sf-item .sf-menu-icon {
  float: left;
}
.sf-dropdown-popup ul .sf-item.sf-disabled {
  cursor: auto;
  pointer-events: none;
}
.sf-dropdown-popup.sf-drp-btn-sm ul {
  min-width: 136px;
  padding: 8px 0;
  font-size: 0.875rem;
}
.sf-dropdown-popup.sf-drp-btn-sm ul .sf-item {
  line-height: 32px;
  padding: 0 16px;
}
.sf-dropdown-popup.sf-drp-btn-sm ul .sf-item .sf-menu-icon {
  margin-right: 12px;
}
.sf-dropdown-popup.sf-drp-btn-me ul {
  min-width: 176px;
  padding: 8px 0;
  font-size: 1rem;
}
.sf-dropdown-popup.sf-drp-btn-me ul .sf-item {
  line-height: 40px;
  padding: 0 20px;
}
.sf-dropdown-popup.sf-drp-btn-me ul .sf-item .sf-menu-icon {
  margin-right: 12px;
}
.sf-dropdown-popup.sf-drp-btn-la ul {
  min-width: 184px;
  padding: 12px 0;
  font-size: 1.125rem;
}
.sf-dropdown-popup.sf-drp-btn-la ul .sf-item {
  line-height: 48px;
  padding: 0 24px;
}
.sf-dropdown-popup.sf-drp-btn-la ul .sf-item .sf-menu-icon {
  margin-right: 16px;
}
.sf-rtl .sf-dropdown-popup .sf-item .sf-menu-icon {
  float: right;
  margin-left: 12px;
  margin-right: 0;
}
.sf-rtl .sf-dropdown-popup.sf-drp-btn-sm .sf-item .sf-menu-icon {
  margin-left: 12px;
  margin-right: 0;
}
.sf-rtl .sf-dropdown-popup.sf-drp-btn-me .sf-item .sf-menu-icon {
  margin-left: 12px;
  margin-right: 0;
}
.sf-rtl .sf-dropdown-popup.sf-drp-btn-la .sf-item .sf-menu-icon {
  margin-left: 16px;
  margin-right: 0;
}
.sf-dropdown-popup-width ul {
  min-width: 0;
}
.sf-dropdown-popup-width ul li {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}
.sf-dropdown-popup ul .sf-item .sf-menu-url {
  color: rgb(var(--color-sf-on-surface));
}
.sf-dropdown-popup ul .sf-item .sf-menu-icon path {
  fill: rgb(var(--color-sf-on-surface-variant));
}
.sf-dropdown-popup ul .sf-item.sf-focused {
  background: rgba(var(--color-sf-on-surface), 0.04);
  box-shadow: none;
}
.sf-dropdown-popup ul .sf-item:hover {
  background: rgba(var(--color-sf-on-surface), 0.05);
  color: rgb(var(--color-sf-on-surface));
}
.sf-dropdown-popup ul .sf-item:active, .sf-dropdown-popup ul .sf-item.sf-selected {
  background: rgba(var(--color-sf-primary-container), 0.65);
  color: rgb(var(--color-sf-on-surface));
}
.sf-dropdown-popup ul .sf-item:active .sf-menu-url, .sf-dropdown-popup ul .sf-item.sf-selected .sf-menu-url {
  color: rgb(var(--color-sf-on-surface));
}
.sf-dropdown-popup ul .sf-item:active .sf-menu-icon path, .sf-dropdown-popup ul .sf-item.sf-selected .sf-menu-icon path {
  fill: rgb(var(--color-sf-on-surface));
}