@syncfusion/react-splitbuttons/styles/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));
}
.sf-split-btn-wrapper {
  display: inline-flex;
  white-space: nowrap;
  width: min-content;
  border-radius: var(--sf-radius-20);
  box-shadow: none;
  gap: var(--sf-spacing-2);
}
.sf-split-btn-wrapper .sf-btn-vertical + .sf-dropdown-btn {
  height: auto;
}
.sf-split-btn-wrapper .sf-split-btn,
.sf-split-btn-wrapper .sf-dropdown-btn {
  box-shadow: none;
}
.sf-split-btn-wrapper .sf-split-btn:focus,
.sf-split-btn-wrapper .sf-dropdown-btn:focus {
  outline-offset: 0;
  box-shadow: none;
}
.sf-split-btn-wrapper .sf-split-btn:disabled:focus, .sf-split-btn-wrapper .sf-split-btn:disabled:hover, .sf-split-btn-wrapper .sf-split-btn:disabled:active,
.sf-split-btn-wrapper .sf-dropdown-btn:disabled:focus,
.sf-split-btn-wrapper .sf-dropdown-btn:disabled:hover,
.sf-split-btn-wrapper .sf-dropdown-btn:disabled:active {
  z-index: 0;
}
.sf-split-btn-wrapper .sf-split-btn {
  text-transform: none;
  z-index: 1;
}
.sf-split-btn-wrapper .sf-split-btn:focus, .sf-split-btn-wrapper .sf-split-btn:active {
  box-shadow: none;
  z-index: 2;
}
.sf-split-btn-wrapper .sf-dropdown-btn {
  transition: border-radius 0.25s ease-in;
}
.sf-split-btn-wrapper.sf-standard {
  box-shadow: none;
}
.sf-split-btn-wrapper.sf-split-btn-sm .sf-split-btn {
  padding-inline: var(--sf-spacing-12) var(--sf-spacing-10);
  font-size: var(--sf-font-size-xs);
  border-start-start-radius: var(--sf-radius-16);
  border-start-end-radius: var(--sf-radius-4);
  border-end-start-radius: var(--sf-radius-16);
  border-end-end-radius: var(--sf-radius-4);
}
.sf-split-btn-wrapper.sf-split-btn-sm .sf-dropdown-btn {
  padding: var(--sf-spacing-10) var(--sf-spacing-12);
  border-start-start-radius: var(--sf-radius-4);
  border-start-end-radius: var(--sf-radius-16);
  border-end-start-radius: var(--sf-radius-4);
  border-end-end-radius: var(--sf-radius-16);
}
.sf-split-btn-wrapper.sf-split-btn-sm .sf-dropdown-btn.sf-active {
  border-radius: var(--sf-radius-16);
}
.sf-split-btn-wrapper.sf-split-btn-me .sf-split-btn {
  padding-inline: var(--sf-spacing-16) var(--sf-spacing-12);
  padding-block: var(--sf-spacing-10);
  font-size: var(--sf-font-size-sm);
  border-start-start-radius: var(--sf-radius-20);
  border-start-end-radius: var(--sf-radius-4);
  border-end-start-radius: var(--sf-radius-20);
  border-end-end-radius: var(--sf-radius-4);
}
.sf-split-btn-wrapper.sf-split-btn-me .sf-dropdown-btn {
  padding: var(--sf-spacing-12) var(--sf-spacing-14);
  border-start-start-radius: var(--sf-radius-4);
  border-start-end-radius: var(--sf-radius-20);
  border-end-start-radius: var(--sf-radius-4);
  border-end-end-radius: var(--sf-radius-20);
}
.sf-split-btn-wrapper.sf-split-btn-me .sf-dropdown-btn.sf-active {
  border-start-start-radius: var(--sf-radius-16);
  border-start-end-radius: var(--sf-radius-20);
  border-end-start-radius: var(--sf-radius-16);
  border-end-end-radius: var(--sf-radius-20);
}
.sf-split-btn-wrapper.sf-split-btn-la .sf-split-btn {
  padding-inline: var(--sf-spacing-20) var(--sf-spacing-16);
  font-size: var(--sf-font-size-base);
  border-start-start-radius: var(--sf-radius-24);
  border-start-end-radius: var(--sf-radius-4);
  border-end-start-radius: var(--sf-radius-24);
  border-end-end-radius: var(--sf-radius-4);
}
.sf-split-btn-wrapper.sf-split-btn-la .sf-dropdown-btn {
  padding: var(--sf-spacing-12) var(--sf-spacing-14);
  border-start-start-radius: var(--sf-radius-4);
  border-start-end-radius: var(--sf-radius-24);
  border-end-start-radius: var(--sf-radius-4);
  border-end-end-radius: var(--sf-radius-24);
}
.sf-split-btn-wrapper.sf-split-btn-la .sf-dropdown-btn.sf-active {
  border-radius: var(--sf-radius-24);
}