@import url('./default-keyframes.css');
.tabset {
  position: relative;
  margin-top: 1em;
  height: var(--tabset-height, 25em);
  clear: both;
}
.tabset > .tab {
  float: left;
}
.tabset > .tab > label {
  position: relative;
  background: #0001;
  border-color: #0003;
  padding: .5em;
  border-width: 1px 1px 0 1px;
  border-style: solid;
  border-radius: .5em .5em 0 0;
}
.tabset > .tab > input[type='radio'] {
  display: none;
}
.tabset > .tab > div {
  background: var(--background-color, white);
  border-color: #0003;
  position: absolute;
  top: calc(1.3em + .5em - 2px);
  left: 0; right: 0; bottom: 0;
  padding: .5em;
  border-width: 1px 1px 1px 1px;
  border-style: solid;
}
.tabset > .tab > input[type='radio']:checked ~ label ~ div {
  z-index: 1;
}
.tabset > .tab > input[type='radio']:checked ~ label {
  z-index: 2;
  background: var(--background-color, white);
  border-color: #0003;
  border-width: 1px 1px 0 1px;
  border-style: solid;
  border-radius: .5em .5em 0 0;
}
.tabset > .tab > input[type='radio']:checked ~ label ~ div > div {
  animation: fade-in 1.6s ease;
}
/*
   Reference(s)

   [1] https://css-tricks.com/functional-css-tabs-revisited/
*/