.ol {
  list-style: none;
  display: flex;
  grid-gap: 6px;
  gap: 6px;
  padding: 0;
}

.textItem {
  color: var(--ds-gray-900);
  font-size: 14px;
  display: flex;
  align-items: center;
  grid-gap: 6px;
  gap: 6px;
  cursor: pointer;
  transition: color 0.2s;
}

.textItem a {
  color: inherit;
  text-decoration: none;
}

.textItem:last-of-type svg {
  display: none;
}

.textItem svg {
  color: var(--ds-gray-900) !important;
}

@media (hover: hover) {
  .textItem:hover {
    color: var(--ds-gray-1000);
  }
}

.textItem.active {
  color: var(--ds-gray-1000);
}

.textItem.disabled {
  color: var(--ds-gray-700);
  cursor: not-allowed;
}

.menuItem {
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid transparent;
  transition-property: color, border-color, background;
  transition-duration: 0.2s;
  cursor: pointer;
  background: var(--ds-background-200);
  border-color: var(--ds-gray-alpha-400);
  color: var(--ds-gray-900);
  font-size: 14px;
}

@media (hover: hover) {
  .menuItem:hover {
    background: var(--ds-gray-200);
    border-color: var(--ds-gray-alpha-500);
    color: var(--ds-gray-1000);
  }
}

.menuItem:focus-visible {
  outline: 2px solid var(--ds-gray-600);
}

.menuItem.active {
  border-color: var(--ds-gray-600);
  background: var(--ds-background-100);
  color: var(--ds-gray-1000);
}

.menuItem.disabled {
  color: var(--ds-gray-700);
  background: var(--ds-gray-alpha-200);
  border-color: var(--ds-gray-alpha-400);
  cursor: not-allowed;
}

.menuWrapper {
  display: flex;
  grid-gap: 8px;
  gap: 8px;
}