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

[data-toggle-reset] > * {
  pointer-events: none;
}

[data-modal-target] {
  cursor: pointer;
}
[data-modal-target] > * {
  pointer-events: none;
}  
[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;
}
 
[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-tab-target] > *,
[data-toggle-target] > * {
  pointer-events: none;
}
  
 


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

[data-toggle-close] > * {
  pointer-events: none;
}