.button {
  white-space: nowrap;
}

.button[disabled] {
  color: var(--color-text-ultra-light);
}

.dropdown {
  position: absolute;
  left: 0;
  top: 100%;
  border-radius: var(--radius-small);
  box-shadow: var(--shadow-layer);
  background: var(--color-background);
  min-width: 12em;
  z-index: var(--layer-high);
  padding: calc(var(--space-xxxsmall) / 2);
}

.dropdown:focus {
  outline: none;
}

.item {
  display: block;
  appearance: none;
  width: 100%;
  outline: none;
  border: 0;
  border-radius: var(--radius-small);
  padding: calc(var(--space-xxxsmall) + var(--space-xxxsmall) / 2);
  background: none;
  text-align: left;
  color: var(--color-text-light);
  font-size: var(--size-small);
  line-height: var(--line-height);
  text-decoration: none;
  cursor: default;
}

.item[data-active-item],
.item:hover,
.item:focus,
.item:active {
  background: var(--color-highlight);
  color: var(--color-text);
}

.itemActive {
  background: var(--color-highlight-info);
  color: var(--color-primary);
}

.itemActive:hover,
.itemActive:focus,
.itemActive:active {
  background: var(--color-highlight-info);
  color: var(--color-primary-dark);
}