/* ===================================================================
 * Zoon Third-party Stylesheets
 * Template Ver. 2.0.0
 * 09-26-2022
 * -------------------------------------------------------------------
 *
 * TOC:
 * # PrismJS
 * # Basiclightbox
 *
 * ------------------------------------------------------------------- */

/* ===================================================================
 * # PrismJS 1.20.0
 *   https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript+markup-templating+php 
 *   
 *   okaidia theme for JavaScript, CSS and HTML
 *   Loosely based on Monokai textmate theme by http://www.monokai.nl/
 *   @author ocodia
 * ------------------------------------------------------------------- */
code[class*=language-],
pre[class*=language-] {
  color          : #f8f8f2;
  background     : none;
  text-shadow    : 0 1px rgba(0, 0, 0, 0.3);
  font-family    : var(--font-mono);
  font-size      : calc(var(--text-size) * 0.9444);
  text-align     : left;
  white-space    : pre;
  word-spacing   : normal;
  word-break     : normal;
  word-wrap      : normal;
  line-height    : var(--vspace-1);
  -moz-tab-size  : 4;
  -o-tab-size    : 4;
  tab-size       : 4;
  -webkit-hyphens: none;
  -ms-hyphens    : none;
  hyphens        : none;
}

/* Code blocks */
pre[class*=language-] {
  padding : var(--vspace-0_5) 0 var(--vspace-1);
  margin  : var(--vspace-1) 0;
  overflow: auto;
}

:not(pre)>code[class*=language-],
pre[class*=language-] {
  background: #272822;
}

/* Inline code */
:not(pre)>code[class*=language-] {
  padding    : 0.1em;
  white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: slategray;
}

.token.punctuation {
  color: #f8f8f2;
}

.token.namespace {
  opacity: 0.7;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
  color: #f92672;
}

.token.boolean,
.token.number {
  color: #ae81ff;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #a6e22e;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
  color: #f8f8f2;
}

.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
  color: #e6db74;
}

.token.keyword {
  color: #66d9ef;
}

.token.regex,
.token.important {
  color: #fd971f;
}

.token.important,
.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}



/* ===================================================================
 * # Basiclightbox
 *
 *
 * ------------------------------------------------------------------- */
.basicLightbox {
  position       : fixed;
  display        : flex;
  justify-content: center;
  align-items    : center;
  top            : 0;
  left           : 0;
  width          : 100%;
  height         : 100vh;
  background     : var(--color-gray-19);
  opacity        : 0.01;
  transition     : opacity 0.4s ease;
  z-index        : 1000;
  will-change    : opacity;
}

.basicLightbox::after {
  content            : "";
  position           : absolute;
  top                : 1.6rem;
  right              : 1.8rem;
  width              : 2em;
  height             : 2em;
  background         : url(../images/icons/icon-close-2.svg);
  background-position: center;
  background-size    : 1.6rem 1.6rem;
  background-repeat  : no-repeat;
  cursor             : pointer;
}

.basicLightbox--visible {
  opacity: 1;
}

.basicLightbox__placeholder {
  max-width  : 100%;
  transform  : scale(0.9);
  transition : all 0.4s ease;
  z-index    : 1;
  will-change: transform;
  opacity    : 0;
}

.basicLightbox__placeholder>iframe:first-child:last-child,
.basicLightbox__placeholder>img:first-child:last-child,
.basicLightbox__placeholder>video:first-child:last-child {
  display   : block;
  position  : absolute;
  top       : 0;
  right     : 0;
  bottom    : 0;
  left      : 0;
  margin    : auto;
  max-width : 95%;
  max-height: 95%;
}

.basicLightbox__placeholder>iframe:first-child:last-child,
.basicLightbox__placeholder>video:first-child:last-child {
  pointer-events: auto;
}

.basicLightbox__placeholder>img:first-child:last-child,
.basicLightbox__placeholder>video:first-child:last-child {
  width : auto;
  height: auto;
}

.basicLightbox--iframe .basicLightbox__placeholder,
.basicLightbox--img .basicLightbox__placeholder,
.basicLightbox--video .basicLightbox__placeholder {
  width         : 100%;
  height        : 100%;
  pointer-events: none;
}

.basicLightbox--visible .basicLightbox__placeholder {
  transform: scale(1);
  opacity  : 1;
}