/* Dropdown styles */
.rz-dropdown.invalid {
  border: 1px solid red; /* TODO define error color */
}

.rz-dropdown {
  cursor: pointer;
  border-radius: 0.25rem !important;
  height: 1.5rem !important;
  padding: 0 0 0 0.4rem !important;
}

/* Remove round hover effect on the multiselect checkboxes */
.rz-chkbox-box:after {
  display: none !important;
}

.rz-multiselect-item-content {
  font-size: var(--fontsize-text-big);
  font-weight: var(--font-weight-semibold);
}

.rz-multiselect-panel {
  border-radius: 0.5rem !important;

  --rz-checkbox-checked-background-color: var(
    --background-interactive-secondary-active
  );

  --rz-checkbox-checked-hover-background-color: var(
    --background-interactive-secondary-active
  );

  --rz-dropdown-item-selected-background-color: var(
    --background-static-neutral-white
  );
  --rz-dropdown-item-selected-hover-background-color: var(
    --background-interactive-secondary-hover
  );
  --rz-dropdown-item-selected-color: var(--text-onbutton-onsecondary-default);
  --rz-dropdown-item-selected-hover-color: var(
    --text-onbutton-onsecondary-default
  );
}

/* Filter dropdowns */
.rz-dropdown.filter.secondary {
  background-color: var(--background-interactive-secondary-default);
  font-size: var(--fontsize-text-big);
  font-weight: var(--font-weight-bold);
  border: 0.125rem solid transparent !important;
  display: flex;
  justify-content: center;
}

.rz-dropdown.filter.secondary .rz-placeholder {
  color: var(--text-onbutton-onsecondary);
}

.rz-dropdown.filter.secondary:hover {
  --rz-input-hover-background-color: var(
    --background-interactive-secondary-hover
  ) !important;
  border: 0.125rem solid transparent !important;
}

/* rz-dropdown uses a div, so there is no :active state */

.rz-dropdown.filter.secondary:focus-visible,
.rz-dropdown.filter.secondary:focus {
  background-color: var(--background-interactive-secondary-hover) !important;
  color: var(--text-onbutton-onsecondary) !important;
  border: 0.125rem solid var(--background-interactive-secondary-active) !important;
}

/* if at least one filter is selected -> show some kind a "active" state */
.rz-dropdown.filter.secondary:not(.rz-state-empty) {
  background-color: var(--background-interactive-secondary-active);
  color: var(--text-onbutton-onsecondary-active);
}