[data-toggle-reset] {
  cursor: pointer;
} 

[data-modal-target] {
  cursor: pointer;
}
 
[data-modal-content] {
  background: hsla(var(--black), 0.66);
  height: 100%;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  transition: opacity 0.5s ease-in-out;
  width: 100%;
  z-index: -1;
}
[data-modal-content].active {
    opacity: 1;
    pointer-events: all;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

[data-toggle-content].active {
  display: block;
}

[data-tab-content]:not(.active) {
  display: none;
}
 
[data-toggle-content] {
  transition: height 0.3s ease;
  height: 0;
  overflow: hidden;
}

[data-toggle-target] .close {
  display: none;
}

[data-toggle-target].active .close {
  display: block;
}

[data-toggle-target].active .open {
  display: none;
}

[data-tab-target],
[data-toggle-target] {
  cursor: pointer;
}

 
[data-close] {
  display: flex;
  flex-flow: column;
}

[data-close]::after {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -1;
  content: "";
  left: 0;
  top: 0;
}