/* =========================================================
 * ComboBox - Closed State
 * Make AntD Select look like the original native <select>
 * ========================================================= */

.pyi-combo-box {
  height: 19px;
  min-height: 19px;

  border: 1px solid #555 !important;
  border-radius: 0 !important;

  background: #fff !important;
  box-shadow: none !important;

  box-sizing: border-box;

  font:
    12px Arial,
    sans-serif;

  vertical-align: middle;
}

/* Remove AntD default selector border */

.pyi-combo-box .ant-select-selector {
  height: 17px !important;
  min-height: 17px !important;

  padding: 0 17px 0 0 !important;

  border: none !important;
  border-radius: 0 !important;

  background: transparent !important;
  box-shadow: none !important;
}

/* Selected value container */

.pyi-combo-box .ant-select-selection-wrap {
  height: 17px !important;
  min-height: 17px !important;

  line-height: 17px !important;
}

/* Selected value / placeholder */

.pyi-combo-box .ant-select-selection-item,
.pyi-combo-box .ant-select-selection-placeholder {
  height: 17px !important;
  line-height: 17px !important;

  padding: 0 !important;
  margin: 0 !important;

  font:
    12px Arial,
    sans-serif !important;

  color: #000 !important;
}

.pyi-com-box .ant-select-selector {
  padding-inline-start: 0 !important;
}
/* Search input */

.pyi-combo-box .ant-select-selection-search {
  inset-inline-start: 3px !important;
  inset-inline-end: 17px !important;
}

.pyi-combo-box .ant-select-selection-search-input {
  height: 17px !important;

  line-height: 17px !important;

  padding: 0 !important;

  font:
    12px Arial,
    sans-serif !important;
}

/* Hover / focus / open */

.pyi-combo-box:hover,
.pyi-combo-box.ant-select-focused,
.pyi-combo-box.ant-select-open {
  border-color: #555 !important;

  border-radius: 0 !important;

  box-shadow: none !important;
}

.pyi-combo-box:hover .ant-select-selector,
.pyi-combo-box.ant-select-focused .ant-select-selector,
.pyi-combo-box.ant-select-open .ant-select-selector {
  border: none !important;

  border-radius: 0 !important;

  box-shadow: none !important;
}

/* =========================================================
 * ComboBox Arrow
 * ========================================================= */

.pyi-combo-box .ant-select-arrow {
  top: 50% !important;

  right: 5px !important;

  width: 8px;
  height: 8px;

  margin: 0 !important;

  transform: translateY(-50%) !important;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #000;
}

.pyi-combo-box-arrow {
  display: block;

  width: 0;
  height: 0;

  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #000;

  pointer-events: none;
}

/* =========================================================
 * Disabled State
 * ========================================================= */

.pyi-combo-box.ant-select-disabled {
  border-color: #999 !important;

  background: #f0f0f0 !important;

  cursor: default !important;
}

.pyi-combo-box.ant-select-disabled .ant-select-selector {
  background: transparent !important;
}

.pyi-combo-box.ant-select-disabled .ant-select-selection-item {
  color: #666 !important;
}

.pyi-combo-box.ant-select-disabled .pyi-combo-box-arrow {
  border-top-color: #777;
}

/* =========================================================
 * ComboBox Dropdown
 * Long text / wrapping / scrolling
 * ========================================================= */

.pyi-combo-box-popup {
  min-width: 200px;

  max-width: 80vw;

  box-sizing: border-box;

  z-index: 9999 !important;
}

/* Variable option height */

.pyi-combo-box-popup .ant-select-item {
  height: auto !important;

  min-height: 24px;

  padding: 3px 8px;

  align-items: flex-start;
}

/* Allow long text wrapping */

.pyi-combo-box-popup .ant-select-item-option-content {
  width: auto;

  max-width: 80vw;

  white-space: normal !important;

  overflow: visible !important;

  text-overflow: clip !important;

  overflow-wrap: anywhere;

  word-break: break-word;
}

.pyi-combo-box-option {
  white-space: normal;

  overflow-wrap: anywhere;

  word-break: break-word;
}

/* =========================================================
 * Small viewport
 * ========================================================= */

@media (max-width: 600px) {
  .pyi-combo-box-popup {
    width: 80vw !important;

    min-width: 0 !important;

    max-width: 80vw !important;
  }

  .pyi-combo-box-popup .ant-select-item-option-content {
    width: 100%;

    max-width: 100%;
  }

  .pyi-combo-box-option {
    width: 100%;

    max-width: 100%;
  }
}

/* =========================================================
 * Spreadsheet Cell ComboBox
 * ========================================================= */

.pyi-combo-box.pyi-combo-box-cell {
  width: 100% !important;

  height: 100% !important;

  min-width: 0 !important;

  min-height: 0 !important;

  margin: 0 !important;

  padding: 0 !important;

  box-sizing: border-box;

  overflow: hidden;
}

/* Remove ComboBox own border in table */

.pyi-combo-box.pyi-combo-box-cell {
  border: none !important;

  box-shadow: none !important;
}

.pyi-combo-box.pyi-combo-box-cell .ant-select-selector {
  width: 100% !important;

  min-width: 0 !important;

  max-width: 100% !important;

  border: none !important;

  box-shadow: none !important;

  outline: none !important;
}

/* Keep Spreadsheet active-cell border only */

.pyi-combo-box.pyi-combo-box-cell:hover,
.pyi-combo-box.pyi-combo-box-cell.ant-select-focused,
.pyi-combo-box.pyi-combo-box-cell.ant-select-open {
  border: none !important;

  box-shadow: none !important;

  outline: none !important;
}

.pyi-combo-box.pyi-combo-box-cell:hover .ant-select-selector,
.pyi-combo-box.pyi-combo-box-cell.ant-select-focused .ant-select-selector,
.pyi-combo-box.pyi-combo-box-cell.ant-select-open .ant-select-selector {
  border: none !important;

  box-shadow: none !important;

  outline: none !important;
}