tabs {
  /* margin: 40px auto;
    position: relative; */
  display: block;
}

/* tabs tab{
} */

tabs tab > input[type="radio"] {
  display: none;
}
tabs tab > label:first {
  margin-left: 10px;
}

tabs tab > label {
  display: block;
  padding: 0 10px;

  cursor: pointer;
  position: relative;
  background: var(--pico-secondary);
  border-top-left-radius: var(--pico-border-radius);
  border-top-right-radius: var(--pico-border-radius);

  border-top: var(--pico-primary-border) solid var(--pico-border-width);
  border-left: var(--pico-primary-border) solid var(--pico-border-width);
  border-right: var(--pico-primary-border) solid var(--pico-border-width);
  color: var(--pico-primary-inverse);
}

tabs tab > label:hover {
  background: var(--pico-primary-hover);
  color: var(--pico-primary-inverse);
}

tabs .content {
  z-index: 0;
  overflow: auto;
  position: absolute;

  opacity: 0;
  transition: opacity 400ms ease-out;
  border-top: 1px solid #ccc;
}

tabs > tab > [role="tab"]:checked + label {
  top: 0;
  background: var(--pico-primary-background);
  border-top: var(--pico-primary-border) solid var(--pico-border-width);
  border-left: var(--pico-primary-border) solid var(--pico-border-width);
  border-right: var(--pico-primary-border) solid var(--pico-border-width);
}

tabs > tab > [role="tab"]:checked ~ .content {
  z-index: 1;

  opacity: 1;
  transition: opacity 400ms ease-out;
}