.sf-ddl {
  user-select: none;
  cursor: pointer;
}
.sf-ddl.sf-popup {
  border-radius: var(--sf-radius-4);
  box-shadow: var(--sf-elevation-2);
  margin-top: var(--sf-spacing-2);
  background: linear-gradient(0deg, rgba(var(--sf-color-surface), 1), rgba(var(--sf-color-surface), 1)), rgba(var(--sf-color-surface));
  overflow-y: hidden;
  border: 1px solid rgb(var(--sf-color-outline-variant));
  cursor: auto;
}
.sf-ddl.sf-popup > :first-child {
  max-height: inherit;
  display: flex;
  flex-direction: column;
  padding: var(--sf-spacing-4) var(--sf-spacing-0);
}
.sf-ddl.sf-popup > .sf-small {
  padding: var(--sf-spacing-4) var(--sf-spacing-0);
}
.sf-ddl.sf-popup > .sf-large {
  padding: var(--sf-spacing-4) var(--sf-spacing-0);
}
.sf-ddl.sf-dropdown-resizable .sf-medium {
  padding-bottom: var(--sf-spacing-24);
}
.sf-dropdown .sf-icon-rotate {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}
.sf-dropdown .sf-icon-normal {
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}
.sf-ddl-filter-parent {
  display: block;
  padding: var(--sf-spacing-4) var(--sf-spacing-12);
  flex: 0 0 auto;
}
.sf-dropdown-list {
  pointer-events: none;
}
.sf-dropdown-list.sf-input-value-template {
  width: 0;
}