.browserSidebarContainer:has([zen-glance-selected]),
.browserSidebarContainer.zen-glance-overlay {
  visibility: inherit;
}

#tabbrowser-tabpanels {
  transition: transform 0.1s ease-in-out;
}

#tabbrowser-tabpanels:has(.zen-glance-background) {
  transform: scale(0.97);
  backdrop-filter: blur(5px);

  & .zen-glance-background {
    opacity: 0.6;
    transition: opacity 0.1s ease-in-out;
  }
}

#zen-glance-sidebar-container {
  display: none;

  & toolbarbutton:hover {
    background: var(--button-background-color-hover);
  }
}

.browserSidebarContainer.zen-glance-overlay {
  &[fade-out='true'] {
    background: transparent;
    opacity: 1;

    & .browserContainer {
      animation: zen-glance-content-animation-out .2s ease-in-out forwards !important;
      animation-direction: reverse !important;

      & browser {
        opacity: 0;
        transition: opacity .1s ease-in-out;
      }

      & #zen-glance-sidebar-container {
        opacity: 0;
        transition: opacity .1s ease-in-out;
      }
    }
  }

  & .browserContainer {
    background: var(--zen-dialog-background);
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
    transform: translate(var(--initial-x), var(--initial-y));
    width: var(--initial-width);
    height: var(--initial-height);
    position: absolute;
    border-radius: var(--zen-border-radius);
    opacity: 0;
    top: 0;
    left: 0;
    flex: unset !important;
    border: 1px solid var(--zen-colors-border);

    &[has-finished-animation='true'] {
      position: relative !important;
      transition: 0s !important;
      transform: none !important;
      margin: auto !important;
      top: -5px !important;
      left: 0 !important;
    }

    & #zen-glance-sidebar-container {
      position: fixed;
      display: flex;
      top: 10%;
      left: 0;
      transform: translateY(-50%);
      opacity: 0;
      background: var(--zen-dialog-background);

      border: 1px solid var(--zen-colors-border);
      border-right: none;

      border-top-left-radius: var(--zen-border-radius);
      border-bottom-left-radius: var(--zen-border-radius);

      padding: 5px;
      gap: 6px;

      animation: zen-glance-buttons-animation 0.2s ease-in-out forwards;
      animation-delay: 0.3s;

      & toolbarbutton {
        width: 32px;
        height: 32px;

        & label {
          display: none;
        }
      }
    }

    & browser {
      width: 100%;
      height: 100%;
      opacity: 1;
      transition: opacity 0.2s ease-in-out;
      transition-delay: 0.1s;
    }

    &[animate-full='true'] {
      opacity: 1;
      animation: zen-glance-buttons-animation-full 0.2s ease-in-out forwards !important;

      & #zen-glance-sidebar-container {
        opacity: 0 !important;
      }
    }

    &[animate='true'] {
      animation: zen-glance-content-animation .3s ease-in-out forwards;
      animation-delay: 0.1s;

      &:not([animate-end='true']) {
        pointer-events: none;

        & browser {
          opacity: 0;
          visibility: hidden;
        }

        & #zen-glance-sidebar-container {
          opacity: 0;
          animation: none;
          pointer-events: none;
        }
      }
    }
  }
}