@import url("zen-fullscreen-override.css");

:root {
  --zen-main-browser-background: transparent;
  --zen-appcontent-border: 1px solid var(--zen-colors-border);
  --zen-browser-border-radius: var(--zen-panel-radius);
}

toolbox#navigator-toolbox, 
#browser {
  background: transparent !important;
}

#browser {
  width: 100%;
}

html#main-window > body {
  background: var(--zen-main-browser-background) !important;
}

:not([inDOMFullscreen="true"]) #appcontent {
  overflow: hidden;
}

#appcontent {
  background: var(--toolbar-bgcolor);
}

:not([inDOMFullscreen="true"]) #appcontent,
#sidebar-box {
  /** Sidebar is already hidden in full screen mode */
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  border: none;
}


panel[type="arrow"][animate][animate="open"] {
  animation: zen-jello-animation 0.2s ease-in-out;
}

panel[type="arrow"][animate][animate="cancel"] {
  animation: zen-jello-out-animation 0.2s ease-in-out;
}

@keyframes zen-jello-animation {
  0% {
    transform: scale3d(0.8, 0.8, 0.8);
  }

  60% {
    transform: scale3d(1.02, 1.02, 1.02);
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@keyframes zen-jello-out-animation {
  0% {
    transform: scale3d(1, 1, 1);
  }

  60% {
    transform: scale3d(1.02, 1.02, 1.02);
  }

  99% {
    opacity: 0;
    transform: scale3d(0.8, 0.8, 0.8);
  }

  100% {
    -moz-window-transform: none;
    transform: none;
  }
}