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

%include ../../shared/syncedtabs/sidebar.inc.css

/* These styles are intended to mimic XUL trees and the XUL search box. */

.content-container {
  -moz-appearance: -moz-mac-source-list;
}

.item {
  color: -moz-DialogText;
}

.item-title-container {
  box-sizing: border-box;
  align-items: center;
  height: 24px;
  font-size: 12px;
}

.item.selected > .item-title-container {
  color: HighlightText;
  font-weight: bold;
}

.item.selected > .item-title-container {
  -moz-appearance: -moz-mac-source-list-selection;
}

.item.selected:focus > .item-title-container {
  -moz-appearance: -moz-mac-active-source-list-selection;
}

.item.client .item-twisty-container {
  min-width: 16px;
  height: 16px;
  background-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded");
}

@media not all and (-moz-mac-yosemite-theme) {
  .item.client.selected .item-twisty-container {
    background-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded-inverted");
  }

  .item.client.selected.closed .item-twisty-container {
    background-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed-inverted");
  }

  .item.client.selected .item-twisty-container:dir(rtl) {
    background-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded-inverted");
  }

  .item.client.selected.closed .item-twisty-container:dir(rtl) {
    background-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed-inverted-rtl");
  }
}

.item.client.closed .item-twisty-container {
  background-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed");
}

.item.client.selected:focus .item-twisty-container {
  background-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded-inverted");
}

.item.client.selected.closed:focus .item-twisty-container {
  background-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed-inverted");
}

.item.client .item-twisty-container:dir(rtl) {
  background-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded");
}

.item.client.closed .item-twisty-container:dir(rtl) {
  background-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed-rtl");
}

.item.client.selected:focus .item-twisty-container:dir(rtl) {
  background-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded-inverted");
}

.item.client.selected.closed:focus .item-twisty-container:dir(rtl) {
  background-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed-inverted-rtl");
}

@media (-moz-mac-yosemite-theme) {
  .item.selected > .item-title-container {
    color: -moz-dialogtext;
    font-weight: 500;
  }

  .item.selected:focus > .item-title-container {
    color: #fff;
  }
}

.sidebar-search-container {
  border-bottom: 1px solid #bdbdbd;
}

.search-box {
  -moz-appearance: searchfield;
  padding: 1px;
  font-size: 12px;
  cursor: text;
  margin: 4px 8px 10px;
  border-width: 3px;
  border-style: solid;
  border-color: currentcolor;
  border-image: none;
  -moz-border-top-colors: transparent #888 #000;
  -moz-border-right-colors: transparent #FFF #000;
  -moz-border-bottom-colors: transparent #FFF #000;
  -moz-border-left-colors: transparent #888 #000;
  border-top-right-radius: 2px;
  border-bottom-left-radius: 2px;
  background-color: #FFF;
  color: #000;
  -moz-user-select: text;
  text-shadow: none;
}

.search-box.compact > .textbox-input-box > .textbox-search-icons > .textbox-search-clear {
  background-image: url(chrome://global/skin/icons/searchfield-cancel.svg);
  background-repeat: no-repeat;
  background-size: 11px 11px;
  width: 11px;
  height: 11px;
}

.search-box.compact > .textbox-input-box > .textbox-search-icons > .textbox-search-icon {
  display: none;
}

.search-box[focused="true"] {
  -moz-border-top-colors: -moz-mac-focusring -moz-mac-focusring #000000;
  -moz-border-right-colors: -moz-mac-focusring -moz-mac-focusring #000000;
  -moz-border-bottom-colors: -moz-mac-focusring -moz-mac-focusring #000000;
  -moz-border-left-colors: -moz-mac-focusring -moz-mac-focusring #000000;
}

.search-box.compact {
    padding: 0px;
    /* font size is in px because the XUL it was copied from uses px */
    font-size: 11px;
}

.textbox-search-clear,
.textbox-search-icon {
  margin-top: 1px;
}