/* Outer layout for dash dropdown */
#dashboard-container .dash-dropdown {
  background-color: var(--field-enabled);
  border: none;
  border-radius: 0;
  box-shadow: var(--box-shadow-elevation-0);
  font-size: var(--text-size-02);
}

/* Dropdown menu when clicking on expand arrow */
#dashboard-container .Select-menu-outer {
  background-color: var(--field-enabled);
  border: none;
  border-radius: 0;
  box-shadow: var(--box-shadow-elevation-0);
  font-size: var(--text-size-02);
  line-height: var(--text-size-05);
}

/* Dropdown menu options */
#dashboard-container .VirtualizedSelectOption {
  color: var(--text-primary);
  font-weight: var(--text-weight-regular);
}

/* Dropdown menu hover effect */
#dashboard-container .VirtualizedSelectFocusedOption {
  background-color: var(--state-overlays-hover);
}

/* Input box for existing values and user input */
#dashboard-container .Select-control {
  background-color: inherit;
  border: inherit;
  border-radius: inherit;
  height: 32px;
}

#dashboard-container .Select.is-focused > .Select-control {
  background-color: var(--field-enabled);
}

/* User input */
#dashboard-container .dash-dropdown .Select-input {
  display: block;
  height: var(--tag-height);
  margin-left: unset;
}

.Select-input > input {
  padding: 0 !important; /* Required so tags don't jump caused by adding table */
}

#dashboard-container.Select-input > input {
  height: 100%;
  padding: 0;
}

/* Border on focus */
#dashboard-container .is-focused:not(.is-open) > .Select-control {
  box-shadow: 0 0 0 2px var(--focus-focus) inset;
}

/* Single-select dropdown only ------------------- */
#dashboard-container .Select--single .Select-value {
  padding-left: var(--spacing-02);
}

.has-value.Select--single > .Select-control .Select-value .Select-value-label,
.has-value.is-pseudo-focused.Select--single
  > .Select-control
  .Select-value
  .Select-value-label {
  color: var(
    --text-primary
  ) !important; /* Required so text color don't change caused by adding table */
}

/* Tags --------------------------- */
#dashboard-container .Select--multi .Select-value {
  background-color: var(--tags-bg-color);
  border: 0;
  border-radius: 0;
  box-shadow: var(--box-shadow-elevation-0);
  color: var(--tags-text-color);
  font-size: var(--text-size-02);
  height: var(--tag-height);
  height: 100%;
  letter-spacing: var(--letter-spacing-body-ui-02);
  margin: 0;
  padding: 0 var(--spacing-01);
  vertical-align: baseline;
}

/* Tag: Label */
#dashboard-container .Select--multi .Select-value-label {
  color: var(--text-primary);
  line-height: var(--text-size-05);
  padding: 0 4px;
}

/* Tag: Cross */
#dashboard-container .Select--multi .Select-value-icon {
  background: inherit;
  border: none;
  color: var(--text-secondary);
  line-height: inherit;
  margin: 0;
  padding: 0;
}

/* Tag: Cross on hover */
#dashboard-container .Select--multi .Select-value-icon:hover {
  background: inherit;
  color: var(--text-secondary);
}

/* Tag: Arrow */
.Select-arrow-zone {
  padding-right: 8px;
  width: 16px;
}

/* Page Selector Dropdown */
#dashboard-container
  .dash-dropdown
  .Select-menu-outer
  .VirtualizedSelectSelectedOption
  > a {
  pointer-events: none;
}

#dashboard-container
  .dash-dropdown
  .Select-menu-outer
  .VirtualizedSelectOption
  > a {
  height: 100%;
  width: 100%;
}

#dashboard-container .Select--multi .Select-clear-zone {
  color: var(--text-secondary);
  width: 16px;
}

/** spacing for tag elements only when elements are present inside
wrapper **/
.Select--multi.has-value .Select-multi-value-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 8px;
}