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

/* Main container: Displays the filters and presets in 2 columns */

#filter-container {
  width: 510px;
  height: 200px;
  display: flex;
  position: relative;
  padding: 5px;
  box-sizing: border-box;
  /* when opened in a xul:panel, a gray color is applied to text */
  color: var(--theme-body-color);
}

#filter-container.dragging {
  -moz-user-select: none;
}

.filters-list,
.presets-list {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.filters-list {
  /* Allow the filters list to take the full width when the presets list is
     hidden */
  flex-grow: 1;
  padding: 0 6px;
}

.presets-list {
  /* Make sure that when the presets list is shown, it has a fixed width */
  width: 200px;
  padding-left: 6px;
  transition: width .1s;
  flex-shrink: 0;
  border-left: 1px solid var(--theme-splitter-color);
}

#filter-container:not(.show-presets) .presets-list {
  width: 0;
  border-left: none;
  padding-left: 0;
}

#filter-container.show-presets .filters-list {
  width: 300px;
}

/* The list of filters and list of presets should push their footers to the
   bottom, so they can take as much space as there is */

#filters,
#presets {
  flex-grow: 1;
  /* Avoid pushing below the tooltip's area */
  overflow-y: auto;
}

/* The filters and presets list both have footers displayed at the bottom.
   These footers have some input (taking up as much space as possible) and an
   add button next */

.footer {
  display: flex;
  margin: 10px 3px;
  align-items: center;
}

.footer :not(button) {
  flex-grow: 1;
  margin-right: 3px;
}

/* Styles for 1 filter function item */

.filter,
.filter-name,
.filter-value {
  display: flex;
  align-items: center;
}

.filter {
  margin: 5px 0;
}

.filter-name {
  width: 120px;
  margin-right: 10px;
}

.filter-name label {
  -moz-user-select: none;
  flex-grow: 1;
}

.filter-name label.devtools-draglabel {
  cursor: ew-resize;
}

/* drag/drop handle */

.filter-name i {
  width: 10px;
  height: 10px;
  margin-right: 10px;
  cursor: grab;
  background: linear-gradient(to bottom,
                              currentColor 0,
                              currentcolor 1px,
                              transparent 1px,
                              transparent 2px);
  background-repeat: repeat-y;
  background-size: auto 4px;
  background-position: 0 1px;
}

.filter-value {
  min-width: 150px;
  margin-right: 10px;
  flex: 1;
}

.filter-value input {
  flex-grow: 1;
}

/* Fix the size of inputs */
/* Especially needed on Linux where input are bigger */
input {
  width: 8em;
}

.preset {
  display: flex;
  margin-bottom: 10px;
  cursor: pointer;
  padding: 3px 5px;

  flex-direction: row;
  flex-wrap: wrap;
}

.preset label,
.preset span {
  display: flex;
  align-items: center;
}

.preset label {
  flex: 1 0;
  cursor: pointer;
  color: var(--theme-body-color);
}

.preset:hover {
  background: var(--theme-selection-background);
}

.preset:hover label, .preset:hover span {
  color: var(--theme-selection-color);
}

.preset .remove-button {
  order: 2;
}

.preset span {
  flex: 2 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  order: 3;
  color: var(--theme-body-color-alt);
}

.remove-button {
  width: 16px;
  height: 16px;
  background: url(chrome://devtools/skin/images/close.svg);
  background-size: cover;
  font-size: 0;
  border: none;
  cursor: pointer;
}

.hidden {
  display: none !important;
}

#filter-container .dragging {
  position: relative;
  z-index: 10;
  cursor: grab;
}

/* message shown when there's no filter specified */
#filter-container p {
  text-align: center;
  line-height: 20px;
}

.add,
#toggle-presets {
  background-size: cover;
  border: none;
  width: 16px;
  height: 16px;
  font-size: 0;
  vertical-align: middle;
  cursor: pointer;
  margin: 0 5px;
}

.add {
  background: url(chrome://devtools/skin/images/add.svg);
}

#toggle-presets {
  background: url(chrome://devtools/skin/images/pseudo-class.svg);
}

.add,
.remove-button,
#toggle-presets {
  filter: var(--icon-filter);
}

.show-presets #toggle-presets {
  filter: url(chrome://devtools/skin/images/filters.svg#checked-icon-state);
}