/**
* dropdown
*/
:root {
  --dropdown-background-color: var(--color-background-light-primary);
  --dropdown-border-active-color: var(--color-background-key-primary-90);
  --dropdown-border-border-radius: var(--number-corner-1);
  --dropdown-icon: url("/images/icon-dropdown.svg");
  --dropdown-icon-color: var(--color-on-background-light-variant-10);
  --dropdown-icon-transform: translateY(var(--accordion-icon-translate-y, -60%)) rotate(45deg);
  --dropdown-icon-active-color: var(--color-key-primary);
  --dropdown-icon-active-transform: translateY(calc(var(--accordion-icon-translate-y) * 0)) rotate(-135deg);
  --dropdown-label-font-size: var(--font-size-default);
  --dropdown-menu-min-w: 8rem;
  --dropdown-menu-border-color: var(--color-background-key-primary-90);
  --dropdown-menu-border-radius: var(--number-corner-1);
  --dropdown-menu-padding: 0.75rem 0.65rem;
  --dropdown-item-me: 3rem;
  --dropdown-item-padding: 0.1rem;
  --dropdown-item-gap: 0.5rem;
  --dropdown-item-icon-color: var(--color-key-secondary);
  --dropdown-item-font-size: var(--font-size-default);
  --dropdown-item-line-height: inherit;
  --dropdown-item-color: var(--color-on-background-light-variant-10);
  --dropdown-item-active-indicator-width: 0.45rem;
  --dropdown-item-active-indicator-height: 0.75rem;
  --dropdown-item-active-color: var(--color-key-primary);
  --dropdown-item-active-font: inherit;
  --dropdown-item-hover-color: var(--color-key-secondary);
  --dropdown-item-hover-background: transparent;
}

/* Dropdown container */
.dropdown {
  display: inline-block;
  position: relative;
  place-content: center;
  place-items: center;
  width: fit-content;
  min-height: 2.25rem;
  padding: 0 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--dropdown-border-border-radius);
  /* Dropdown toggle label */
  /* Dropdown menu */
}
.dropdown--small {
  --dropdown-label-font-size: var(--font-size-body-small);
  --dropdown-item-font-size: var(--font-size-body-small);
  --dropdown-item-active-indicator-width: 0.4rem;
  --dropdown-item-active-indicator-height: 0.65rem;
}
.dropdown:hover {
  border-color: var(--dropdown-border-active-color);
}
.dropdown.open {
  border-color: var(--dropdown-border-active-color);
}
.dropdown.open .dropdown-menu {
  clip-path: polygon(-25% -25%, 125% -25%, 125% 165%, -25% 125%);
  opacity: 1;
  transition: var(--transition-default) opacity;
}
.dropdown.open .dropdown-label::after {
  transform: var(--dropdown-icon-active-transform);
  border-color: var(--dropdown-icon-active-color);
}
.dropdown .dropdown-label {
  display: flex;
  align-items: center;
  width: max-content;
  padding-right: 1.25rem;
  gap: 0.75rem;
  font-size: var(--dropdown-label-font-size);
  cursor: pointer;
}
.dropdown .dropdown-label * {
  pointer-events: none;
}
.dropdown .dropdown-label strong {
  pointer-events: none;
}
.dropdown .dropdown-label::after {
  position: relative;
  top: 3px;
  right: calc(-1 * var(--accordion-icon-width, 0.75rem) * 1.5);
  width: var(--accordion-icon-width, 0.75rem);
  min-width: var(--accordion-icon-width, 0.75rem);
  height: var(--accordion-icon-height, 0.75rem);
  transform: var(--dropdown-icon-transform);
  border-width: 0 1px 1px 0;
  border-style: solid;
  border-color: var(--dropdown-icon-color);
  content: "";
  cursor: pointer;
  transition: var(--transition-default) transform;
}
.dropdown .dropdown-label.indicator-off {
  padding-right: 0px;
  gap: 0px;
}
.dropdown .dropdown-label.indicator-off::after {
  content: unset;
}
.dropdown .image-wrapper {
  display: inline-block;
  height: 1.25rem;
}
.dropdown .image-wrapper img {
  object-fit: contain;
}
.dropdown .dropdown-menu {
  display: flex;
  z-index: var(--z-1);
  position: absolute;
  top: 100%;
  left: 0;
  flex-direction: column;
  min-width: var(--dropdown-menu-min-w);
  margin: 0.25rem 0 0;
  padding: var(--dropdown-menu-padding);
  gap: var(--dropdown-item-gap) 0;
  border: 1px solid var(--dropdown-menu-border-color);
  border-radius: var(--dropdown-menu-border-radius);
  background-color: var(--dropdown-background-color);
  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  opacity: 0;
  transition: var(--transition-default) opacity, ease 0s clip-path 0.25s;
  /* Dropdown menu items */
}
.dropdown .dropdown-menu.dropdown-menu-right {
  right: 0;
  left: unset;
}
.dropdown .dropdown-menu.dropdown-menu-up {
  top: auto;
  bottom: 100%;
  margin: 0 0 0.25rem;
}
.dropdown .dropdown-menu li {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-default, 5px);
  list-style: none;
  /* Dropdown menu item links */
}
.dropdown .dropdown-menu li.active {
  color: var(--dropdown-item-active-color);
  pointer-events: none;
}
.dropdown .dropdown-menu li.active::before {
  display: inline-block;
  position: absolute;
  top: calc(50% - 3px);
  right: 0.5rem;
  width: var(--dropdown-item-active-indicator-width);
  height: var(--dropdown-item-active-indicator-height);
  transform: translateY(-50%) rotate(45deg);
  border-right: 2px solid var(--dropdown-item-icon-color);
  border-bottom: 2px solid var(--dropdown-item-icon-color);
  content: "";
}
.dropdown .dropdown-menu li.active a,
.dropdown .dropdown-menu li.active span {
  color: inherit;
  font-family: var(--dropdown-item-active-font);
}
.dropdown .dropdown-menu li.active a:hover,
.dropdown .dropdown-menu li.active span:hover {
  background: inherit;
  color: inherit;
}
.dropdown .dropdown-menu li a,
.dropdown .dropdown-menu li span {
  display: flex;
  position: relative;
  align-items: center;
  margin-right: var(--dropdown-item-me);
  padding: var(--dropdown-item-padding);
  gap: var(--dropdown-item-icon-gap);
  color: var(--dropdown-item-color);
  font-size: var(--dropdown-item-font-size, var(----dropdown-label-font-size));
  line-height: var(--dropdown-item-line-height);
  font-family: var(--font-family-light);
  text-transform: unset;
  cursor: pointer;
  transition: var(--transition-fast) all;
}
.dropdown .dropdown-menu li a:hover,
.dropdown .dropdown-menu li span:hover {
  background: var(--dropdown-item-hover-background);
  color: var(--dropdown-item-hover-color);
}