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

#screenshotsPagePanel {
  position: absolute !important;
  top: 3%;
  right: 1.5%;
}

#zen-workspaces-button .zen-workspace-sidebar-name {
  margin-left: 10px;
  display: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#customization-footer #customization-toolbar-visibility-button {
  display: none !important;
}

@media -moz-pref('zen.theme.disable-lightweight') {
  #customization-lwtheme-link {
    display: none !important;
  }
}

.private-browsing-indicator-with-label {
  display: none !important;
}

body > #confetti {
  z-index: 1;
}

/* Bookmarks */
#PersonalToolbar:not([collapsed]) {
  min-height: 30px;
}

/* Firefox View */
#firefox-view-button,
#wrapper-firefox-view-button {
  display: none !important;
}

/* Emojis picker */

#PanelUI-zen-emojis-picker {
  --panel-width: 250px;
  --panel-padding: 0px;

  #PanelUI-zen-emojis-picker-header {
    gap: 10px;
    align-items: center;
    padding: 0px 10px;
    padding-bottom: 6px;
  }

  #PanelUI-zen-emojis-picker-pages {
    overflow: hidden;
    max-height: 230px;

    & > * {
      min-width: 100%;
    }
  }

  &[only-svg-icons='true'] {
    & #PanelUI-zen-emojis-picker-change-emojis {
      display: none;
    }

    & #PanelUI-zen-emojis-picker-change-svg {
      pointer-events: none;
    }

    & #PanelUI-zen-emojis-picker-pages > vbox[emojis='true'] {
      display: none;
    }
  }

  #PanelUI-zen-emojis-picker-none label {
    display: none;
  }

  #PanelUI-zen-emojis-picker-search {
    padding: 4px;
    width: 100%;
  }

  #PanelUI-zen-picker-header {
    padding: 6px 16px;
    justify-content: space-between;

    & > toolbarbutton:first-of-type {
      pointer-events: none;
    }

    & #PanelUI-zen-emojis-buttons-wrapper {
      gap: 4px;

      & toolbarbutton {
        appearance: none;
        font-size: small;
        padding: 0 6px;
        border-radius: 4px;
        font-weight: 600;

        &:hover {
          background-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
        }

        &.selected {
          background-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
        }
      }
    }
  }

  #PanelUI-zen-emojis-picker-list,
  #PanelUI-zen-emojis-picker-svgs {
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;

    padding: 10px;
    padding-top: 5px;

    gap: 5px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));

    .zen-emojis-picker-emoji {
      font-size: 14px;
      padding: 0px !important;
      & image {
        display: none;
      }
    }

    .zen-emojis-picker-svg {
      padding: 4px !important;
      & label {
        display: none;
      }

      & .toolbarbutton-icon {
        width: 22px;
      }
    }
  }

  .zen-emojis-picker-emoji,
  .zen-emojis-picker-svg,
  #PanelUI-zen-emojis-picker-none {
    width: 22px;
    height: 22px;
    appearance: none;

    &:hover {
      background-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
      border-radius: 4px;
      cursor: pointer;
    }
  }
}

.toolbarbutton-1:not(#tabs-newtab-button) {
  --tab-border-radius: 6px;
  --toolbarbutton-border-radius: var(--tab-border-radius);
  --toolbarbutton-inner-padding: 7px;
  --toolbarbutton-outer-padding: 2px;

  transition:
    background-color 0.1s,
    transform 0.2s;

  &[open='true'] {
    transition: background-color 0.1s;
  }

  &:not([open='true']):active:hover {
    transform: scale(0.95);
  }
}

.zen-interactive-button {
  background: color-mix(in srgb, currentColor 6%, transparent) !important;
  transition:
    background-color 0.12s ease-in-out,
    transform 0.12s ease-in-out;

  &:hover {
    background-color: color-mix(in srgb, currentColor 10%, transparent) !important;
  }

  &:active:hover {
    transform: scale(0.95);
  }
}

/** Update animation */

#zen-update-animation {
  position: fixed;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255, 255, 255, 0.5) 40%,
    rgba(255, 255, 255, 0.5) 60%,
    transparent 100%
  );
  left: 0;
  z-index: 999;
  opacity: 0;
  transform: translateY(-50%);
  pointer-events: none;
}

#zen-update-animation-border {
  position: absolute;
  border-radius: var(--zen-native-content-radius);
  width: 100%;
  height: 100%;
}

#zen-update-animation-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px; /* thickness of border */

  background: radial-gradient(
    ellipse 100% 50% at center var(--background-top),
    rgba(255, 255, 255, 0.5) 80%,
    transparent
  );

  /* Punch out the inside once (not animated) */
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

#TabsToolbar {
  -moz-window-dragging: unset;
}

/* Status panel */

@media (-moz-pref('zen.theme.styled-status-panel')) {
  #statuspanel {
    padding: 6px;

    & > #statuspanel-label {
      border-radius: 16px !important;
      border: 1px solid rgba(225, 225, 225, 0.15) !important;
      padding: 4px 8px 5px 8px !important;
      font-weight: 600 !important;
      background: color-mix(in srgb, var(--zen-primary-color), black 70%) !important;
      color: rgba(255, 255, 255, 0.8) !important;
    }
  }
}

/* Customizable modes */
#customization-container {
  --toolbar-bgcolor: var(--zen-dialog-background);
}

/* Site Data popup */

#zen-unified-site-data-panel {
  --panel-padding: 0px;
  --panel-width: 234px;
  --menu-panel-width-wide: calc(var(--panel-width) - var(--panel-padding) * 2);
  --uei-icon-size: 16px;
  --arrowpanel-menuitem-border-radius: 10px;
}

#unified-extensions-messages-container {
  display: none;
}

#zen-site-data-addons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  overflow: visible;

  .unified-extensions-item-name,
  .unified-extensions-item-message,
  .unified-extensions-item-message-hover,
  .unified-extensions-item-message-hover-menu-button,
  .unified-extensions-item-menu-button {
    display: none;
  }

  #overflowed-extensions-list,
  #unified-extensions-area,
  .unified-extensions-list,
  #zen-site-data-new-addon-button-container {
    display: contents;

    &:empty {
      display: none;
    }

    & > * {
      background-color: color-mix(in srgb, currentcolor 6%, transparent);
      width: 48px;
      height: 32px;
      margin: 0;
      justify-content: center;
      align-items: center;
      border-radius: 6px;
      transition:
        background-color 0.1s ease-in-out,
        transform 0.12s ease-in-out;

      & toolbarbutton {
        background: transparent !important;
      }

      & .toolbarbutton-badge-stack {
        margin: 0;
      }

      &:hover {
        transform: scale(1.05);
      }

      &:active:hover {
        transform: scale(0.95);
        background-color: color-mix(in srgb, currentcolor 10%, transparent);
      }
    }
  }
}

.zen-site-data-section {
  gap: 6px;
  padding: 8px;
}

.zen-site-data-section-header {
  font-weight: 600;

  & label {
    margin: 0;
  }

  & > label:nth-child(2) {
    font-weight: 500;
    font-size: smaller;
    transition: opacity 0.15s ease-in-out;
    opacity: 0;
    border-radius: 6px;
    padding: 2px 6px;

    &:hover {
      background-color: color-mix(in srgb, currentColor 10%, transparent);
    }
    .zen-site-data-section:hover & {
      opacity: 0.5;
    }
  }
}

#zen-site-data-new-addon-button .toolbarbutton-text {
  display: none;
}

.permission-popup-permission-item {
  gap: 8px;
  overflow: hidden;
  align-items: center;
}

.permission-popup-permission-label-container {
  min-width: 1px;
}

.permission-popup-permission-label {
  margin: 0px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.permission-popup-permission-icon {
  fill: var(--button-primary-color);
  padding: 8px;
  width: 34px;
  height: 34px;
  overflow: visible;
  position: relative;
  appearance: none;

  & label {
    display: none;
  }

  & image {
    -moz-context-properties: fill;
    z-index: 1;
  }

  &::before {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 99px;
    width: 32px;
    height: 32px;
    background: var(--button-primary-bgcolor);
    opacity: 0.6;
    transition:
      transform 0.12s ease-in-out,
      opacity 0.12s ease-in-out;
  }

  .permission-popup-permission-item:hover &::before {
    transform: scale(1.05);
  }

  .permission-popup-permission-item:active:hover &::before {
    transform: scale(0.95);
  }

  .permission-popup-permission-item[state='allow'] &::before {
    opacity: 1;
  }
}

.zen-permission-popup-permission-state-label {
  opacity: 0.6;
  font-size: smaller;
  font-weight: 400;
  margin: 0;
}

#identity-box,
#page-action-buttons {
  opacity: 0.6;
}

#zen-site-data-footer {
  border-top: 1px solid color-mix(in srgb, currentColor 6%, transparent);
  padding-top: 8px;
  margin: 2px 8px 8px 8px;

  & toolbarbutton {
    margin: 0;
  }
}

@media (-moz-pref('zen.theme.hide-unified-extensions-button')) {
  #unified-extensions-button {
    display: none !important;
  }
}

#unified-extensions-button:not([showing]) {
  display: none !important;
}

#zen-site-data-header {
  gap: 8px;
  align-items: center;
  padding: 8px;
  padding-bottom: 0;

  & toolbarbutton {
    margin: 0;
    appearance: none;
    -moz-context-properties: fill;
    fill: currentColor;
    color: light-dark(rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.8));
    max-width: 48px;
    height: 32px;
    position: relative;

    &[disabled] {
      opacity: 0.5;
      pointer-events: none;
    }

    & .toolbarbutton-text {
      display: none;
    }

    & image {
      width: 18px;
      pointer-events: none;
      z-index: 1;
    }

    &::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        to bottom,
        light-dark(rgb(255, 255, 255), rgb(34, 34, 34)),
        light-dark(rgb(246, 246, 246), rgb(21, 21, 21))
      );
      transition: transform 0.12s ease-in-out;
      box-shadow:
        0px 2px 4px rgba(0, 0, 0, 0.075),
        inset 0px 1px 0px light-dark(transparent, rgba(255, 255, 255, 0.15));
      border-radius: 6px;
      --base-border-color: light-dark(rgba(0, 0, 0, 0.175), rgba(255, 255, 255, 0.1));
      border: 1px solid light-dark(var(--base-border-color), rgb(21, 21, 21));
      box-sizing: border-box;
      will-change: transform;
    }

    &.active {
      color: var(--button-primary-color);

      &::before {
        background: var(--button-primary-bgcolor);
      }
    }

    &:hover::before {
      transform: scale(1.03);
    }

    &:active:hover::before {
      transform: scale(0.97);
    }
  }
}

#zen-site-data-settings-list toolbarseparator {
  margin: 6px 0;
}

/* Overflow panel */
#widget-overflow-mainView {
  --menu-panel-width-wide: 200px;

  & toolbarbutton {
    scale: 1 !important;
  }

  & .panel-subview-body {
    padding: var(--panel-subview-body-padding) !important;
  }
}

#widget-overflow-mainView > toolbarseparator,
#overflowMenu-customize-button {
  display: none;
}

#widget-overflow-list {
  flex-direction: column-reverse;
}