@telekom/scale-components/dist/collection/components/dropdown-select/dropdown-select.css

Scale is the digital design system for Telekom products and experiences.

:host {
  --font-weight: var(--telekom-typography-font-weight-bold);
  --height: var(--telekom-spacing-composition-space-13);
  --color: var(--telekom-color-text-and-icon-standard);
  --color-disabled: var(--telekom-color-text-and-icon-disabled);
  --background-disabled: none;
  --background-hover: var(--telekom-color-ui-state-fill-hovered);
  --border: var(--telekom-spacing-composition-space-01) solid
    var(--telekom-color-ui-border-standard);
  --border-color-hover: var(--telekom-color-ui-border-hovered);
  --border-color-focus: var(--telekom-color-ui-border-hovered);
  --border-color-disabled: var(--telekom-color-ui-border-disabled);
  --border-invalid: var(--telekom-spacing-composition-space-02) solid
    var(--telekom-color-functional-danger-hovered);
  --focus-outline: var(--telekom-line-weight-highlight) solid
    var(--telekom-color-functional-focus-standard);
  --spacing-x: var(--telekom-spacing-composition-space-05);
  --transition: all var(--telekom-motion-duration-transition)
    var(--telekom-motion-easing-standard);
  --radius: var(--telekom-radius-standard);
  --spacing-x-for-helper-text: var(--telekom-spacing-composition-space-03);

  /*combobox*/
  --transition-combobox: var(--transition);
  --background-combobox: var(--telekom-color-ui-state-fill-standard);
  /*
    18px 32px 4px 12px
    (subtracting 1px from border)
  */
  --spacing-combobox: 1.125rem
    calc(2rem - var(--telekom-spacing-composition-space-01)) 0.25rem
    calc(0.75rem - var(--telekom-spacing-composition-space-01));

  /*meta*/
  --spacing-y-meta: var(--telekom-spacing-composition-space-03);
  --color-meta: var(--telekom-color-text-and-icon-standard);

  /*icon*/
  --height-icon: 20px;
  --color-icon: var(--telekom-color-text-and-icon-standard);
  --color-icon-hover: var(--telekom-color-text-and-icon-standard);
  --color-icon-active: var(--telekom-color-text-and-icon-standard);
  --transition-icon: var(--transition);

  /*label*/
  --color-label: var(--telekom-color-text-and-icon-additional);
  --z-index-label: var(--scl-z-index-10);
  --transition-label: var(--transition);
  --transform-label: translate(var(--spacing-x), 0.875rem);
  --transform-label-animated: translate(
    var(--spacing-x),
    calc(0.25rem + var(--telekom-spacing-composition-space-01))
  );

  /*listbox*/
  --background-listbox: var(--telekom-color-background-surface);
  --box-shadow-listbox: 0 2px 4px 0 rgba(0, 0, 0, 0.1),
    0 4px 16px 0 rgba(0, 0, 0, 0.1);
  --max-height-listbox: 300px;
  --z-index-listbox: 99;
}

/*combobox-container*/
[part='combobox-container'] *,
[part='combobox-container'] *::before,
[part='combobox-container'] *::after {
  box-sizing: border-box;
}

[part='combobox-container'] {
  display: block;
  position: relative;
}

/*combobox*/
[part='combobox'] {
  width: 100%;
  height: var(--height);
  margin: 0;
  display: flex;
  align-items: center;
  outline: none;
  padding: var(--spacing-combobox);
  z-index: 1;
  box-sizing: border-box;
  transition: var(--transition-combobox);
  font: var(--telekom-text-style-body);
  border-radius: var(--radius);
  border: var(--border);
  box-sizing: border-box;
  white-space: nowrap;
  text-overflow: ellipsis;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--background-combobox);
  color: var(--color);
}

[part~='select']:not([part~='disabled'])
  [part='combobox']:hover
  ~ [part='icon'] {
  color: var(--color-icon-hover);
}
[part~='select']:not([part~='disabled'])
  [part='combobox']:active
  ~ [part='icon'] {
  color: var(--color-icon-active);
}

[part~='select']:not([part~='disabled']):not([part~='invalid'])
  [part='combobox']:hover {
  border-color: var(--border-color-hover);
  background-color: var(--background-hover);
}

[part~='select']:not([part~='disabled'])[part~='invalid']
  [part='combobox']:hover {
  background-color: var(--background-hover);
}

[part~='select']:not([part~='disabled']):not([part~='invalid'])
  [part='combobox']:focus {
  border-color: var(--border-color-focus);
}

[part~='select']:not([part~='disabled']):not([part~='steal-focus'])
  [part='combobox']:focus {
  outline: var(--focus-outline);
  outline-offset: 1px;
}

[part~='invalid'] [part='combobox'] {
  border: var(--border-invalid);
}

[part~='transparent'] [part='combobox'] {
  background-color: transparent;
}

[part~='disabled'] [part='combobox'] {
  cursor: not-allowed;
  border-color: var(--border-color-disabled);
  color: var(--color-disabled);
  background: var(--background-disabled);
}

/*combobox value*/
[part='combobox_value'] {
  width: calc(100%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}

/*meta*/
[part='meta'] {
  display: flex;
  justify-content: space-between;
  margin-top: var(--spacing-y-meta);
  color: var(--color-meta);
}

/*icon*/
[part='icon'] {
  top: 50%;
  right: var(--spacing-x);
  position: absolute;
  transform: translateY(-50%);
  pointer-events: none;
  height: var(--height-icon);
  color: var(--color-icon);
  transition: var(--transition-icon);
}

[part~='disabled'] [part='icon'] {
  color: var(--color-disabled);
}

/*label*/
[part='label'] {
  width: calc(100% - 44px); /* 12px + 32px (x padding) */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  top: 0;
  left: 0;
  color: var(--color-label);
  display: inline-block;
  z-index: var(--z-index-label);
  position: absolute;
  transition: var(--transition-label);
  pointer-events: none;
  font: var(--telekom-text-style-ui);
  transform: var(--transform-label);
}

[part~='animated'] [part='label'] {
  font: var(--telekom-text-style-small-bold);
  transform: var(--transform-label-animated);
}

[part~='disabled'] [part='label'] {
  cursor: not-allowed;
  border-color: var(--border-color-disabled);
  color: var(--color-disabled);
  background: var(--background-disabled);
}

/* hidden label */
[part~='hide-label'] [part='combobox'] {
  padding-top: 0.3125rem;
}

[part~='hide-label'] [part='label'] {
  visibility: hidden;
}

/*listbox*/
[part='listbox'] {
  position: relative;
}

[part='listbox-scroll-container'] {
  max-height: var(--max-height-listbox);
  overflow-y: auto;
}

[part='listbox-pad'] {
  background: var(--background-listbox);
  box-shadow: var(--box-shadow-listbox);
  border-radius: var(--radius);
  padding: var(--radius) 0;
  margin-top: var(--telekom-spacing-composition-space-03);
  left: 0;
  position: absolute;
  top: 100%;
  width: 100%;
  z-index: var(--z-index-listbox);
  display: none;
}

[part~='open'] [part='listbox-pad'] {
  display: block;
}

[part~='strategy-fixed'] [part='listbox-pad'] {
  position: fixed;
}

[part~='transparent'] [part='listbox'] {
  background-color: transparent;
}

/*option*/
[part~='option'] {
  color: var(--color);
}

[part~='option']:hover {
  background-color: var(--background-hover);
}

[part~='option'][part~='current'] {
  outline: var(--focus-outline);
  outline-offset: -2px;
  border-radius: var(--radius);
}

[part~='option'][aria-selected='true'] {
  padding-right: 30px;
  position: relative;
}

[part~='option'][aria-selected='true'] scale-icon-action-checkmark {
  position: absolute;
  right: var(--telekom-spacing-composition-space-05);
  top: var(--telekom-spacing-composition-space-05);
}

[part~='option'] scale-dropdown-select-item::part(base) {
  padding: var(--telekom-spacing-composition-space-05);
}

/*helper-text*/
[part~='has-helper-text'] [part~='combobox-container'] {
  margin-bottom: var(--spacing-x-for-helper-text);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.hcm-disabled {
  display: none;
}

@media screen and (forced-colors: active), (-ms-high-contrast: active) {
  [part='listbox-pad'] {
    outline: var(--focus-outline);
    outline-offset: -2px;
    border-radius: var(--radius);
  }
  .hcm-disabled {
    display: block;
  }
}