/* ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
/*   Open in Preview                                                                                                                 */
/* ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
@keyframes preview-window-open-anchored {
  from {
    opacity: 0;
    transform: translate(var(--tx0, 0px), var(--ty0, 0px)) scale(var(--s0, 0.1));
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translate(0px, 0px) scale(1);
    filter: blur(0px);
} }
@keyframes preview-window-close-anchored {
  from {
    opacity: 1;
    transform: translate(0px, 0px) scale(1);
    filter: blur(0px);
  }
  to {
    opacity: 0;
    transform: translate(var(--tx0, 0px), var(--ty0, 0px)) scale(var(--s0, 0.1));
    filter: blur(6px);
} }
@keyframes preview-window-animate-progress-bar {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
} }
.preview-container {
  align-items: center;
  backdrop-filter: blur(5px);
  background-color: transparent;
  display: flex;
  inset: 0;
  justify-content: center;
  position: fixed;
  transition: background-color 220ms ease;
  z-index: 999;
  &.is-open {
    background-color: #000;
  }
  &.is-leave {
	pointer-events: none;
  }
  &:not(.is-open) .progress-bar {
    visibility: hidden;
  }
  .preview-window {
    backface-visibility: hidden;
    contain: layout style paint;
    display: flex;
    flex-direction: column;
    transform: translate3d(0, 0, 0);
    transform-origin: 0 0;
    will-change: transform, opacity, filter;
    &.animating-open {
      animation: preview-window-open-anchored 320ms cubic-bezier(0.12, 0.8, 0.2, 1) both;
    }
    &.animating-close {
      animation: preview-window-close-anchored 320ms cubic-bezier(0.4, 0, 0.6, 0.4) both;
    }
    .options-container {
      align-items: center;
	  background-image: repeating-linear-gradient(
	    135deg, 
	    rgba(33, 33, 33, 1), 
		rgba(0, 0, 0, 1) 1%, 
		rgba(33, 33, 33, 1) 1%
	  );
	  opacity: 1;
	  border-bottom: 1px solid #333;
	  border-radius: 0rem;
      color: #FFF;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
	  font-family: monospace;
      font-size: 1.125rem;
      gap: .75rem;
      height: 2rem;
      justify-content: center;
	  margin: 0rem;
      opacity: 1;
      text-align: center;
      z-index: 9999;
    }
    .options-button {
      align-items: center;
      background: transparent;
	  border: none;
	  border-radius: 0.25rem;
	  color: #FFF;
      cursor: pointer;
      display: flex;
	  fill: currentColor;
      flex: 0 0 2.5rem;
	  height: 2rem;
      justify-content: center;
	  padding-top: 0.125rem;
      position: relative;
      width: 2rem;
    }
	.options-button:hover {
	  background-color: #006600;
	}
	.options-button:hover svg {
	  /*filter: invert(180%);*/
	}
    .options-button::after {
      background: var(--colorAccentBg);
      border-radius: var(--radiusHalf);
      bottom: -2.188rem;
      color: var(--colorAccentFg);
      content: attr(data-tooltip);
      font-size: 0.75rem;
      left: 50%;
      opacity: 0;
      padding: 0.25rem 0.5rem;
      pointer-events: none;
      position: absolute;
      transform: translateX(-50%);
      white-space: nowrap;
    }
    .options-button:hover::after {
	  opacity: 1;
	}
    .url-input {
      background: transparent;
	  border: none;
      color: #FFF;
      border-radius: 0.25rem;
      flex: 0 0 20%;
	  font-family: monospace;
	  height: 2rem;
	  margin: 0rem;
	  min-width: 2rem;
      padding-left: 0.25rem;
	  margin-right: -11vw;
	  width: 32px;
	  position: relative;
    }
    .progress-bar {
	  background-color: #006600;
      height: 0.125rem;
      left: calc(var(--radius) * 0.75);
      max-width: calc(100% - var(--radius) * 1.5);
      overflow: hidden;
      position: relative;
      transition: width 0.2s linear;
      &.is-complete::after {
        animation: preview-window-animate-progress-bar 1.5s linear infinite;
        background-image: linear-gradient(to right,
          rgba(255, 255, 255, 0.5),
          rgba(255, 255, 255, 0.8),
          rgba(255, 255, 255, 0.5));
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        transform: translateX(-100%);
        width: 50%;
        will-change: transform;
    } }
    webview {
      border-radius: var(--radius);
      flex: 1;
      overflow: hidden;
      position: relative;
    }
    &.reader-open .reader-button {
} } }
#browser.normal .url-input {
  margin-right: -12vw;
}
#browser.maximized .url-input {
  margin-right: -15vw;
}