.segmented{
  width: 100%;
  max-width: 420px;
  margin: 0 auto 2px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(15,23,42,.06);
  border: 1px solid rgba(15,23,42,.06);
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.segmented__item{
  height: 36px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 13px;
  font-weight: 700;
  color: rgba(15,23,42,.55);
}

.segmented__item--active{
  background: var(--surface);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 10px 22px rgba(15,23,42,.10);
  color: rgba(15,23,42,.92);
}