:root{--transitionTime: .25s}.transition-1{position:fixed;top:0;left:0;right:0;bottom:0;z-index:100;background-color:var(--black-color);opacity:0;pointer-events:none;transition:opacity var(--transitionTime) ease-in-out}.transition-1.is-active{opacity:1;pointer-events:all}.transition-2{position:fixed;top:0;left:-100%;right:0;bottom:0;width:100%;z-index:9999;background-color:var(--black-color);transition:left var(--transitionTime) ease-in-out}.transition-2.is-active{left:0}.transition-3{position:fixed;top:0;right:-100%;left:0;bottom:0;width:100%;z-index:9999;background-color:var(--black-color);transition:right var(--transitionTime) ease-in-out}.transition-3.is-active{right:0}.transition-4{position:fixed;top:-100%;left:0;right:0;bottom:0;height:100%;z-index:9999;background-color:var(--black-color);transition:top var(--transitionTime) ease-in-out}.transition-4.is-active{top:0}.transition-5{position:fixed;top:100%;left:0;right:0;bottom:0;height:100%;z-index:9999;background-color:var(--black-color);transition:top var(--transitionTime) ease-in-out}.transition-5.is-active{top:0}.transition-6{position:fixed;top:0;left:0;right:0;bottom:0;height:100%;transform:scale(0%) rotate(90deg);z-index:9999;background-color:var(--black-color);transition:transform var(--transitionTime) ease-in-out}.transition-6.is-active{transform:scale(1)}.transition-7{position:fixed;top:0;left:0;right:0;bottom:0;height:100%;transform:scale(0%) rotate(-90deg);z-index:9999;background-color:var(--black-color);transition:transform var(--transitionTime) ease-in-out}.transition-7.is-active{transform:scale(1)}