/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*-
 * 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/. */

/* Toolbar button */
#workspaces-toolbar-button {
  border-radius: 0px !important;

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

  &[open="true"],
  &:hover:active {
    background-color: var(--toolbarbutton-active-background) !important;
  }

  & > * {
    background: unset !important;
    background-color: unset !important;
    background-image: unset !important;
  }

  & > label {
    display: inherit !important;
  }
}

/* Toolbar button's Popup */
#workspacesPopupContent {
  background: inherit !important;
  overflow: scroll;
  max-height: 300px;
  width: 300px;
  padding: 0px 5px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}

/* Content */
#workspacesToolbarButtonPanelBox {
  margin: 10px;
}

/* Footer */
#workspacesPopupFooter {
  width: 85% !important;
  margin: auto;
}

/* Separator */
#workspacesPopupSeparator {
  margin: 10px 0px !important;
}

/* Select Workspace buttons */
.workspaceButton {
  list-style-image: url("chrome://branding/content/icon32.png");
  border-radius: var(--tab-border-radius);
  margin: 0 !important;
  margin-right: 5px !important;
  width: -moz-available;
  min-height: 40px;
  max-height: 40px;
  margin-bottom: 5px !important;

  &:hover {
    background-color: unset !important;
  }

  &[data-selected="true"] {
    background-color: color-mix(
      in srgb,
      currentColor 20%,
      transparent
    ) !important;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
  }

  & label,
  & image {
    display: inherit !important;
    background-color: unset !important;
    color: var(--tab-text-color) !important;
  }
}

/* open workspace manager button */
#workspacesManageworkspacesServicesButton {
  list-style-image: url("chrome://global/skin/icons/settings.svg");
  height: 35px;
  width: 35px;

  & > .toolbarbutton-icon {
    background-color: unset !important;
  }

  & > .toolbarbutton-text {
    display: none !important;
  }
}

/* create new workspace button */
#workspacesCreateNewWorkspaceButton {
  list-style-image: url(chrome://global/skin/icons/plus.svg);
  width: -moz-available;
  border-radius: var(--tab-border-radius);
  height: 35px;

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

  &:hover:active {
    background-color: var(--toolbarbutton-active-background) !important;
  }

  & > * {
    background: unset !important;
    background-color: unset !important;
    background-image: unset !important;
  }

  & > label {
    display: inherit !important;
  }
}
