.tab {
  width: 100%;
  color: var(--color);
  overflow: hidden;
  border: 0.0625rem solid var(--light-color);
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.tab + .tab {
  margin-top: -1rem;
  border-top: 0px;
}

.tab-label {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  padding: .5rem;
}

.tab-label p {
  text-align: left;
}

.expandable.tab-label {
  background: var(--line-color);
  cursor: pointer;
}

.expandable.tab-label:hover {
  background: var(--link-color);
}

.expandable.tab-label::after {
  content: "\276F";
  width: 1rem;
  height: 1rem;
  text-align: center;
  -webkit-transition: all .35s;
  transition: all .35s;
}

.tab-content {
  max-height: 0;
  visibility: hidden;
  padding: 0 .5rem;
  border-left: 0.25rem solid var(--link-active-color);
  color: var(--color);
  background: var(--background);
  -webkit-transition: all .35s;
  transition: all .35s;
}

.tab-close {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: end;
  justify-content: flex-end;
  padding: .5rem;
  background: var(--color);
  cursor: pointer;
}

.tab-close:hover {
  background: var(--link-color);
}

.tab input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.tab input:checked + .expandable.tab-label {
  color: var(--background-color);
  background: var(--link-active-color);
}

.tab input:checked + .tab-label::after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.tab input:checked ~ .tab-content {
  max-height: none;
  visibility: visible;
  padding: .5rem;
}