@import "../../styles/variables.scss";

.enter {
}

.enterActive {
}

.enter .mask {
  opacity: 0;
}

.enterActive .mask {
  opacity: 1;
  transition: all 250ms ease-in;
}

.exit .mask {
  opacity: 1;
}

.exitActive .mask {
  opacity: 0;
  transition: all 250ms ease-out;
  transition-delay: 150ms;
}

.enter .sideOverlay {
   max-width: 0;
}

.enterActive .sideOverlay {
  max-width: 1000px;
  transition: max-width 350ms ease-in;
}

:global(.has-mask).enterActive .sideOverlay {
  transition-delay: 0;
}

.exit .sideOverlay {
  max-width: 1000px;
}

.exitActive .sideOverlay {
  max-width: 0px;
  transition: max-width 350ms ease-out;
}

.sideOverlay {
  height: 100%;
  width: auto;
  position: fixed;
  z-index: 15;
  top: 0;
  overflow-x: hidden;
  opacity: 0.95;
  &:focus {
    outline-color: transparent;
    outline-style: none;
  }
}

.dark {
  background-color: $sidebar-color;
}

.light {
  background-color: $brand-white;
  opacity: 1;
}

.left {
  left: 0;
}

.right {
  right: 0;
}

.mask {
  overflow: hidden;
  z-index: 14;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.activeMask {
  background-color: $overlay-background;
}