#zen-glance-overlay {
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  background: color-mix(in srgb, var(--zen-colors-tertiary) 5%, transparent 95%);
  backdrop-filter: blur(2px);
  animation: zen-glance-overlay-animation 0.2s ease-in-out forwards;
  border-radius: var(--zen-border-radius);

  &[hidden='true'] {
    display: none;
  }

  &[fade-out='true'] {
    & #zen-glance-content {
      & #zen-glance-browser-container {
        transform: translate(var(--initial-x), var(--initial-y));
        width: var(--initial-width);
        height: var(--initial-height);
        top: 0;
        left: 0;
        opacity: 0;
        transition: all .8s ease-in-out;
      }
    }
  }

  & #zen-glance-content {
    width: 100%;
    height: 100%;
    display: flex;

    & #zen-glance-browser-container {
      opacity: .5;
      background: var(--zen-dialog-background);
      border-radius: var(--zen-border-radius);
      box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
      transform: translate(var(--initial-x), var(--initial-y));
      width: var(--initial-width);
      height: var(--initial-height);
      animation: zen-glance-content-animation .8s ease-in-out forwards;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
}