/* taken from https://jsfiddle.net/8e5t0dju */
/* tab component */
[role="tablist"] {
  display: flex;
  gap: .5rem;
}
ol[role="tablist"],
ul[role="tablist"],
menu[role="tablist"] {
  padding-inline-start: 0;
}
ol[role="tablist"] > li,
ul[role="tablist"] > li,
menu[role="tablist"] > li {
  list-style: none;
}

/* tab headers */
[role="tablist"] > [role="tab"] > label {
  cursor: pointer;
  padding-right: 0.5em;
  padding-left: 0.5em;
}
main:has(#tab-1:checked) #tab-1-label,
main:has(#tab-2:checked) #tab-2-label,
main:has(#tab-3:checked) #tab-3-label {
  background-color: var(--pico-primary-hover-background);
  font-weight: bold;
}

/* tab panels */
input[type="radio"] + [role="tabpanel"] {
  display: none;
}
input[type="radio"]:checked + [role="tabpanel"] {
  display: block;
}