/*
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */

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

.zen-glance-background {
  transform: scale(0.98);
  backdrop-filter: blur(5px);
  opacity: 0.6;
}

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

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

.browserSidebarContainer.zen-glance-overlay {
  box-shadow: none !important;

  &[fade-out='true'] {
    background: transparent;
    opacity: 1;

    & .browserContainer {
      opacity: 1;
      animation: zen-glance-content-animation-out 0.3s ease-in-out forwards !important;

      & browser {
        opacity: 1 !important;
      }

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

  & .browserContainer {
    background: var(--zen-dialog-background);
    position: fixed;
    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: 0 !important;
      left: 0 !important;
    }

    & .browserStack {
      border-radius: var(--zen-border-radius);
      overflow: hidden;
    }

    & #zen-glance-sidebar-container {
      position: absolute;
      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 0.4s ease-in-out forwards;

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

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

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