.container {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 44px;
  padding: 4px;
  background-color: var(--color-grey-light);
  border: 1px solid var(--color-grey-soft);
  border-radius: map.get($radius, 'md');
  overflow: clip;
}

.segment {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-width: 88px;
  padding: 10px 24px;
  border: 1px solid transparent;
  border-radius: map.get($radius, 'sm');
  background: none;
  cursor: pointer;

  @include metadata-regular;
  line-height: 1;
  color: var(--color-text-tertiary);

  @include transition(color, background-color, border-color, box-shadow);

  &:hover {
    color: var(--color-text-secondary);
  }
}

.selected {
  background-color: var(--color-surface-primary);
  border-color: var(--color-grey-soft);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  color: var(--color-text-primary);
  font-weight: map.get($font-weights, 'medium');
  cursor: default;

  &:hover {
    color: var(--color-text-primary);
  }
}