@import '@folio/stripes-components/lib/variables.css';

.typedown {
  margin-bottom: var(--gutter);
}

.fullWidth {
  width: 100%;
}

.dropdown {
  margin-bottom: 0;
}

.dropdownMenu {
  background-color: var(--bg);
  padding: 0;
  float: left;
  right: 0;
  box-shadow: var(--shadow);
  border: 1px solid #ccc;
  margin-top: 0;
  width: var(--searchWidth);
  min-width: max(var(--searchWidth), 300px);
  pointer-events: all;
  z-index: 1000;
}

.menuButton {
  composes: interactionStyles from "@folio/stripes-components/lib/sharedStyles/interactionStyles.css";
  margin-bottom: 0;
  border: none;
  text-align: left;
}

/* .menuButton[data-selected=true], .selected {
  background-color: var(--primary);
  color: #fff;
} */

.selectedMenuButton {
  background-color: var(--primary);
  color: #fff;
}

/* Ensure dropdown menu has correct border radius when rendered above/below/floating */
div[class^="overlay"][x-placement="top"]:not([x-out-of-boundaries=""]) > div[class^="dropdownMenu"] {
  border-radius: var(--radius) var(--radius) 0 0;
}

div[class^="overlay"][x-placement="bottom"]:not([x-out-of-boundaries=""]) > div[class^="dropdownMenu"] {
  border-radius: 0 0 var(--radius) var(--radius);
}

div[class^="overlay"][x-out-of-boundaries=""] > div[class^="dropdownMenu"] {
  border-radius: var(--radius);
}

/* Ensure buttons also follow the proper border radius */
div[class^="overlay"][x-placement="top"]:not([x-out-of-boundaries=""]) > div[class^="dropdownMenu"] > div[class^=listContainer] > button:first-child, div[class^="overlay"][x-placement="top"]:not([x-out-of-boundaries=""]) > div[class^="dropdownMenu"] > div[class^=listContainer] button:first-child:before {
  border-radius: var(--radius) var(--radius) 0 0;
}

div[class^="overlay"][x-placement="bottom"]:not([x-out-of-boundaries=""]) > div[class^="dropdownMenu"] > div[class^=listContainer] > button:last-child, div[class^="overlay"][x-placement="bottom"]:not([x-out-of-boundaries=""]) > div[class^="dropdownMenu"] > div[class^=listContainer] > button:last-child:before {
  border-radius: 0 0 var(--radius) var(--radius);
}

/* When floating, last and first buttons need rounding */
div[class^="overlay"][x-out-of-boundaries=""] > div[class^="dropdownMenu"] > div[class^=listContainer] > button:first-child, div[class^="overlay"][x-out-of-boundaries=""] > div[class^="dropdownMenu"] > div[class^=listContainer] > button:first-child:before {
  border-radius: var(--radius) var(--radius) 0 0;
}

div[class^="overlay"][x-out-of-boundaries=""] > div[class^="dropdownMenu"] > div[class^=listContainer] > button:last-child, div[class^="overlay"][x-out-of-boundaries=""] > div[class^="dropdownMenu"] > div[class^=listContainer] > button:last-child:before {
  border-radius: 0 0 var(--radius) var(--radius);
}

/* If there is only one element in a floating list, it needs both corners rounding */
div[class^="overlay"][x-out-of-boundaries=""] > div[class^="dropdownMenu"] > div[class^=listContainer] > button:only-child, div[class^="overlay"][x-out-of-boundaries=""] > div[class^="dropdownMenu"] > div[class^=listContainer] > button:only-child:before {
  border-radius: var(--radius);
}

.menuButton[data-selected=false]:nth-child(even) {
  background-color: var(--color-fill-table-row-odd);
}

.menuButton[data-selected=false]:nth-child(odd) {
  background-color: var(--color-fill-table-row-even);
}

/* Default menu button style is no rounded edges */
.menuButton::before {
  border-radius: 0;
}

.listContainer {
  border-bottom: 1px solid var(--color-border);
  overflow: auto;
  max-height: 40vh;
}

.listItem {
  padding: var(--gutter-static-two-thirds) var(--gutter)
}

.selectedDisplay {
  border-radius: 0 0 var(--radius) var(--radius);
  border: 1px solid #ccc;
  border-top: 0;
  display: flex;
}

.selectedItem {
  flex-grow: 1;
}

.clearItem {
  flex-shrink: 1;
  padding: 0 var(--gutter-static-one-third);
}

.footer {
  padding: var(--gutter-static-one-third) var(--gutter-static-two-thirds)
}

.header {
    padding: var(--gutter-static-one-third) var(--gutter-static-two-thirds)
}