/*
 * 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/.
 */

.zen-glance-sidebar-container {
  position: absolute;
  display: flex;
  z-index: 999;

  top: 0;
  padding: 12px;
  gap: 12px;
  max-width: 56px;

  :root[zen-right-side='true'] & {
    left: 100%;
  }

  :root:not([zen-right-side='true']) & {
    right: 100%;
  }

  & toolbarbutton {
    width: 32px;
    height: 32px;
    background: color-mix(
      in srgb,
      light-dark(rgb(24, 24, 24), rgb(231, 231, 231)) 96%,
      var(--zen-primary-color)
    );
    transition:
      background 0.05s ease,
      scale 0.05s ease;
    border-radius: 999px;
    appearance: none;
    box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.07);
    padding: 8px;
    opacity: 1 !important;
    color: var(--zen-primary-color);

    &:hover {
      background: light-dark(rgb(41, 41, 41), rgb(204, 204, 204));
      scale: 1.05;
    }

    &:hover:active {
      scale: 0.95;
    }

    & label {
      display: none;

      &::before {
        text-overflow: unset;
      }
    }

    &[disabled='true'] {
      scale: 1 !important;
      & image {
        opacity: 0.5;
      }
    }
  }

  & .zen-glance-sidebar-close {
    width: fit-content;
    & label {
      display: block;
      max-width: 0px;
      margin: 0;
      overflow: hidden;
      transition:
        max-width 0.2s ease,
        margin-left 0.2s ease;
    }

    &[waitconfirmation] {
      background: rgb(220, 53, 69);
      color: white;
      fill: white;
      & label {
        max-width: 4rem;
        margin-left: 8px;
      }

      & image {
        filter: none;
      }
    }
  }
}

:root[zen-no-padding='true'] .browserSidebarContainer.zen-glance-background {
  --zen-native-inner-radius: 6px;
  --zen-element-separation: 6px;
}

.browserSidebarContainer.zen-glance-background,
.browserSidebarContainer.zen-glance-overlay .browserContainer {
  border-radius: var(--zen-native-inner-radius);
  box-shadow: var(--zen-big-shadow);
}

.browserSidebarContainer.zen-glance-overlay {
  box-shadow: none !important;
  visibility: inherit;
  z-index: 1;

  :root[zen-no-padding='true'] & {
    --zen-native-inner-radius: 0px;
  }

  & .browserContainer {
    background: var(--zen-dialog-background);
    position: fixed;
    opacity: 0;
    top: 0;
    left: 0;
    flex: unset !important;

    &[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-native-inner-radius);
      overflow: hidden;
    }

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

    &[animate-full='true'] {
      transform: translate(-50%, -50%);
      & .zen-glance-sidebar-container {
        opacity: 0 !important;
      }
    }

    &[animate='true'] {
      position: absolute;
    }
  }

  &[fade-out='true'] {
    & browser {
      transition: opacity 0.1s ease;
      opacity: 0;
    }
  }

  & browser[animate-glance-open='true'] {
    transition: opacity 0.2s ease-in-out;
    opacity: 0;
  }
}
