.list {
  display: inline-flex;
  flex-shrink: 0;
  background-color: var(--color-dark-900);
}

.trigger {
  cursor: pointer;

  display: inline-flex;
  flex-shrink: 0;
  flex-wrap: nowrap;

  padding: 6px 24px;

  background-color: var(--color-dark-900);
  border: 1px solid var(--color-dark-300);

  &:last-of-type {
    border-radius: 0 2px 2px 0;
  }

  &:first-of-type {
    border-radius: 2px 0 0 2px;
  }

  &[data-state='active'] {
    background-color: var(--color-accent-500);
    border-color: var(--color-accent-500);
  }
}

.content {
  color: inherit;
}