@import url('./default-keyframes.css');
.tabset {
  --tab-padding-factor: .4;
  font-size: 0;
  margin-top: var(--font-size, 16px);
}
.tabset:after {
  clear: both;
  content: '';
  display: table;
}
.tabset > .tab {
  display: inline;
}
.tabset > .tab > label {
  background: #0001;
  border-color: #0003 #0003 #0000 #0003;
  display: inline-block;
  font-size: var(--font-size, 16px);
  left: 1px;
  margin-left: -1px;
  padding: calc(var(--font-size, 16px) * var(--tab-padding-factor));
  position: relative;
  vertical-align: bottom;
  border-width: 1px 1px 1px 1px;
  border-style: solid;
  border-radius: .5em .5em 0 0;
}
.tabset > .tab > .tab_wear {
  display: none;/*display: inline;
  display: inline-block;*/
  overflow: hidden;
  position: relative;
  /*height: 0;
  width: 0;*/
}
.tabset > .tab > input[type='radio'] {
  clip: rect(0, 0, 0, 0);
  height: 0;
  opacity: 0;
  position: fixed;
  width: 1px;
  display: none;/*z-index: -1;*/
}
.tabset > .tab > input[type='radio']:checked ~ label {
  z-index: 1;
  background: var(--background-color, white);
  border-color: #0003;
  padding-bottom: calc(var(--font-size, 16px) * var(--tab-padding-factor) + 1px);
  border-width: 1px 1px 0 1px;
  border-style: solid;
  border-radius: .5em .5em 0 0;
}
.tabset > .tab > .tab_wear > .tab_body {
  z-index: 2; /**/
  box-sizing: border-box;
  display: block;
  background: var(--background-color, white);
  border-color: #0003;
  padding: .5em;
  float: left;
  font-size: var(--font-size, 16px);
  margin-top: -1px;
  width: 100%;
  border-width: 1px 1px 1px 1px;
  border-style: solid;
}
.tabset > .tab > input[type='radio']:checked ~ .tab_wear {
  display: inline;
}
.tabset > .tab > input[type='radio']:checked ~ .tab_wear > .tab_body {
  animation: fade-in 1.6s ease;
}
/*
   Reference(s)

   [1] https://codepen.io/Merri/pen/bytea
   [2] https://css-tricks.com/functional-css-tabs-revisited/
*/