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

Syncfusion React SplitButton package is a feature-rich collection of UI components, including SplitButton and DropDownButton, designed for advanced button interactions in React applications.

.sf-dropdown-btn.sf-caret-hide .sf-caret {
  display: none;
}
.sf-dropdown-btn.sf-drp-btn-sm svg {
  width: var(--sf-font-size-xs);
  height: var(--sf-font-size-xs);
}
.sf-dropdown-btn.sf-drp-btn-la .sf-btn-icon {
  width: var(--sf-font-size-2xl);
  height: var(--sf-font-size-2xl);
}
.sf-dropdown-popup {
  background: linear-gradient(0deg, rgba(var(--sf-color-surface), 1), rgba(var(--sf-color-surface), 1)), rgba(var(--sf-color-surface));
  border-radius: var(--sf-radius-4);
  color: rgb(var(--sf-color-on-surface));
  position: absolute;
}
.sf-dropdown-popup ul {
  border-radius: var(--sf-radius-4);
  box-shadow: var(--sf-elevation-2);
  box-sizing: border-box;
  margin: var(--sf-spacing-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: var(--sf-spacing-8) var(--sf-spacing-0);
  border-bottom-color: rgb(var(--sf-color-outline-variant));
}
.sf-dropdown-popup ul .sf-item .sf-menu-icon {
  float: left;
}
.sf-dropdown-popup.sf-drp-btn-sm ul {
  min-width: calc(var(--sf-spacing) * 7.5);
  padding: var(--sf-spacing-8) var(--sf-spacing-0);
  font-size: var(--sf-font-size-sm);
}
.sf-dropdown-popup.sf-drp-btn-sm ul .sf-item {
  line-height: var(--sf-spacing-32);
  padding: var(--sf-spacing-0) var(--sf-spacing-16);
}
.sf-dropdown-popup.sf-drp-btn-sm ul .sf-item .sf-menu-icon {
  margin-inline-end: var(--sf-spacing-12);
}
.sf-dropdown-popup.sf-drp-btn-me ul {
  min-width: calc(var(--sf-spacing) * 10);
  padding: var(--sf-spacing-8) var(--sf-spacing-0);
  font-size: var(--sf-font-size-base);
}
.sf-dropdown-popup.sf-drp-btn-me ul .sf-item {
  line-height: var(--sf-spacing-40);
  padding: var(--sf-spacing-0) var(--sf-spacing-20);
}
.sf-dropdown-popup.sf-drp-btn-me ul .sf-item .sf-menu-icon {
  margin-inline-end: var(--sf-spacing-12);
}
.sf-dropdown-popup.sf-drp-btn-la ul {
  min-width: calc(var(--sf-spacing) * 11.25);
  padding: var(--sf-spacing-12) var(--sf-spacing-0);
  font-size: var(--sf-font-size-lg);
}
.sf-dropdown-popup.sf-drp-btn-la ul .sf-item {
  line-height: var(--sf-spacing-48);
  padding: var(--sf-spacing-0) var(--sf-spacing-24);
}
.sf-dropdown-popup.sf-drp-btn-la ul .sf-item .sf-menu-icon {
  margin-inline-end: var(--sf-spacing-16);
}
.sf-dropdown-popup ul .sf-item .sf-menu-url {
  color: rgb(var(--sf-color-on-surface));
}
.sf-dropdown-popup ul .sf-item .sf-menu-icon path {
  fill: rgb(var(--sf-color-on-surface-variant));
}
.sf-dropdown-popup ul .sf-item.sf-focused {
  background: rgba(var(--sf-color-on-surface), 0.04);
  box-shadow: none;
}
.sf-dropdown-popup ul .sf-item:hover {
  background: rgba(var(--sf-color-on-surface), 0.05);
  color: rgb(var(--sf-color-on-surface));
}
.sf-dropdown-popup ul .sf-item:active, .sf-dropdown-popup ul .sf-item.sf-selected {
  background: rgba(var(--sf-color-primary-container), 0.65);
  color: rgb(var(--sf-color-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(--sf-color-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(--sf-color-on-surface));
}