/**
 * @file
 * Styles for Search API admin pages.
 */

/*
 * OVERVIEW
 */

.search-api-overview td.search-api-status {
  text-align: center;
}

.search-api-overview td {
  vertical-align: top;
}

/*
 * VIEW SERVER
 */

.search-api-server-summary ul.inline {
  margin: 0;
}

.search-api-server-summary ul.inline li {
  padding-left: 0;
}

/*
 * VIEW INDEX
 */
.search-api-limit,
.search-api-batch-size {
  text-align: center;
}

.search-api-index-status .progress .filled {
  background: #0074BD none;
}

/*
 * DROPBUTTONS
 *
 * (Largely copied from D8's dropbutton.css.)
 */

/**
 * When a dropbutton has only one option, it is simply a button.
 */
.dropbutton-wrapper,
.dropbutton-wrapper div {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.js .dropbutton-wrapper {
  display: block;
  min-height: 2em;
  position: relative;
}

.js .dropbutton-wrapper,
.js .dropbutton-widget {
  max-width: 100%;
}

@media screen and (max-width: 600px) {
  .js .dropbutton-wrapper {
    width: 100%;
  }
}

.js .dropbutton-widget {
  position: absolute;
}

/* UL styles are over-scoped in core, so this selector needs weight parity. */
.js .dropbutton-widget .dropbutton {
  list-style-image: none;
  list-style-type: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

.js .dropbutton li,
.js .dropbutton a {
  display: block;
}

/**
 * The dropbutton styling.
 *
 * A dropbutton is a widget that displays a list of action links as a button
 * with a primary action. Secondary actions are hidden behind a click on a
 * twisty arrow.
 *
 * The arrow is created using border on a zero-width, zero-height span.
 * The arrow inherits the link color, but can be overridden with border colors.
 */
.js .dropbutton-multiple .dropbutton-widget {
  padding-right: 2em; /* LTR */
}

.js[dir="rtl"] .dropbutton-multiple .dropbutton-widget {
  padding-left: 2em;
  padding-right: 0;
}

.dropbutton-multiple.open,
.dropbutton-multiple.open .dropbutton-widget {
  max-width: none;
}

.dropbutton-multiple.open {
  z-index: 100;
}

.dropbutton-multiple .dropbutton .secondary-action {
  display: none;
}

.dropbutton-multiple.open .dropbutton .secondary-action {
  display: block;
}

.dropbutton-toggle {
  bottom: 0;
  display: block;
  position: absolute;
  right: 0; /* LTR */
  text-indent: 110%;
  top: 0;
  white-space: nowrap;
  width: 2em;
}

[dir="rtl"] .dropbutton-toggle {
  left: 0;
  right: auto;
}

.dropbutton-toggle button {
  background: none;
  border: 0;
  cursor: pointer;
  display: block;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

.dropbutton-arrow {
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  border-style: solid;
  border-width: 0.3333em 0.3333em 0;
  display: block;
  height: 0;
  line-height: 0;
  position: absolute;
  right: 40%; /* 0.6667em; */
  /* LTR */
  top: 50%;
  margin-top: -0.1666em;
  width: 0;
  overflow: hidden;
}

[dir="rtl"] .dropbutton-arrow {
  left: 0.6667em;
  right: auto;
}

.dropbutton-multiple.open .dropbutton-arrow {
  border-bottom: 0.3333em solid;
  border-top-color: transparent;
  top: 0.6667em;
}

.js .dropbutton-widget {
  background-color: white;
  border: 1px solid #CCC;
}

.js .dropbutton-widget:hover {
  border-color: #B8B8B8;
}

.dropbutton .dropbutton-action > * {
  padding: 0.1em 0.5em;
  white-space: nowrap;
}

.dropbutton .secondary-action {
  border-top: 1px solid #E8E8E8;
}

.dropbutton-multiple .dropbutton {
  border-right: 1px solid #E8E8E8; /* LTR */
}

[dir="rtl"] .dropbutton-multiple .dropbutton {
  border-left: 1px solid #E8E8E8;
  border-right: 0 none;
}

.dropbutton-multiple .dropbutton .dropbutton-action > * {
  margin-right: 0.25em; /* LTR */
}

[dir="rtl"] .dropbutton-multiple .dropbutton .dropbutton-action > * {
  margin-left: 0.25em;
  margin-right: 0;
}

/*
 * MISC
 */

.search-api-alter-add-aggregation-fields,
.search-api-checkboxes-list {
  max-height: 12em;
  overflow: auto;
}