.segment-control{
  display:flex;
  align-items:center;
  width:100%;
  max-width:100%;
  gap:1px;
  padding:2px;
  margin:0 0 8px;
  border:1px solid var(--text);
  border-radius:10px;
  background:var(--white);
  overflow:hidden;
}
.segment-control button{
  flex:1 1 0;
  min-width:0;
  min-height:30px;
  border:0;
  border-radius:7px;
  padding:0 8px;
  background:var(--white);
  color:var(--text);
  font:inherit;
  font-size:14px;
  line-height:1;
  text-align:center;
  white-space:nowrap;
}
.segment-control button.is-active{
  background:var(--text);
  color:var(--white);
  font-weight:650;
}
.segment-control button:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.segment-control button:disabled{background:var(--button-secondary);color:var(--text-secondary)}

.segment-control--two{grid-template-columns:repeat(2,1fr);width:min(100%,430px);margin:0 auto 20px}