.segment-control {
  --ctrl-margin: 0.5em;

  /* display */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  grid-template-rows: 1fr;
  /* positioning */
  position: relative;

  /* box-model */
  border: 1px solid var(--theme-primary-color);
  border-radius: var(--ctrl-margin);
  padding-block: var(--ctrl-margin);
  margin-inline: auto;

  /* typography */
  font-family: var(--header-font-family);
  color: var(--theme-primary-color);

  /* manipulation */
  /* misc */
  list-style: none;
  isolation: isolate;
}

.segment-control .segment + .segment {
  /* display */
  /* positioning */
  /* box-model */
  border-left: 1px solid var(--theme-primary-color);

  /* typography */
  /* manipulation */
  /* misc */
}

.segment-control label {
  display: block;
  box-sizing: content-box;
  width: 100%;
  height: 100%;
}

.segment-control .segment div {
  /* display */
  display: inline-grid;
  place-items: center;

  /* positioning */
  /* box-model */
  border-radius: var(--ctrl-margin);
  height: calc(100% + 2 * (var(--ctrl-margin) + 1px));
  width: calc(100% + 2px);
  padding-inline: 1em;
  padding-block: var(--ctrl-margin);
  margin-block: calc(-1 * (var(--ctrl-margin) + 1px));
  margin-inline: -1px;

  /* typography */
  text-align: center;
  /* manipulation */
  /* misc */
}

.segment-control input[type="radio"] {
  /* display */
  /* positioning */
  /* box-model */
  max-width: 0;
  min-width: 0;
  max-height: 0;
  min-height: 0;
  /* typography */
  /* manipulation */
  opacity: 0;
  /* misc */
}

.segment-control .segment input:checked + div {
  color: var(--light-text);
  background-color: var(--theme-primary-color);
}

.segment-control .segment input:focus-visible + div {
  color: var(--dark-text);
  background-color: var(--theme-tertiary-color);
}

/* TODO highlight affect will come later*/
.segment-control .highlight {
  display: none;
  position: absolute;

  background-color: var(--theme-primary-color);
  mix-blend-mode: color-dodge;

  inset: 0 auto;
  width: 100px;
}