.dropdown {
  --dropdown-text: var(--color-text);
  --dropdown-bg: var(--color-bg);
  --dropdown-border: var(--color-text);
  --dropdown-border-size: 2px;
}
.dropdown.is-dark {
  --dropdown-text: var(--color-white);
  --dropdown-bg: var(--color-black);
  --dropdown-border: var(--color-white);
}

.dropdown {
  position: relative;
  background-color: var(--dropdown-bg);
  color: var(--dropdown-text);
  border: var(--dropdown-border-size) solid var(--dropdown-border);
}
.dropdown.is-opened::after {
  content: "";
  display: block;
  position: absolute;
  bottom: calc(-1 * var(--dropdown-border-size));
  left: 0;
  width: 100%;
  height: var(--dropdown-border-size);
  background-color: var(--dropdown-bg);
  z-index: var(--layer-top);
}
.dropdown.is-top.is-opened::after {
  content: "";
  display: block;
  position: absolute;
  bottom: auto;
  top: calc(-1 * var(--dropdown-border-size));
  left: 0;
  width: 100%;
  height: var(--dropdown-border-size);
  background-color: var(--dropdown-bg);
  z-index: var(--layer-top);
}
@media (max-width: 767px) {
  .dropdown.is-mobile-expandable {
    border: none;
  }
}

.dropdown__button {
  position: relative;
  display: flex;
  align-items: center;
  background: none;
  background-color: transparent;
  color: var(--button-text);
  border: none;
  outline: none;
  padding: var(--size-3) var(--size-4);
  font-size: var(--scale-1);
  border-radius: 0;
  text-decoration: none;
  white-space: nowrap;
}
.dropdown.is-sm .dropdown__button {
  padding: var(--size-2) var(--size-3);
  font-size: var(--scale-0);
}
@media (max-width: 767px) {
  .dropdown.is-mobile-expandable .dropdown__button {
    visibility: hidden;
    position: fixed;
    top: -9999999px;
    left: -9999999px;
  }
}

weav-dropdown:has(img)::part(text) {
  margin-right: var(--size-2);
}

.dropdown__button ::slotted(img) {
  width: 1.7em;
  height: 1.7em;
  margin: 0 -0.2em;
}

.dropdown__button-icon {
  display: inline-block;
  margin-right: calc(-1 * var(--size-2));
  width: 1.2em;
  height: 1.2em;
  fill: var(--dropdown-text);
}
weav-dropdown:has(img)::part(chevron) {
  position: absolute;
  right: var(--size-2);
  bottom: 0;
}

.dropdown__menu-wrapper {
  visibility: hidden;
  z-index: var(--layer-top);
}
.dropdown.is-opened .dropdown__menu-wrapper {
  visibility: visible;
}
@media (max-width: 767px) {
  .dropdown.is-mobile-expandable .dropdown__menu-wrapper {
    visibility: visible;
    position: static !important;
    transform: none !important;
  }
}

.dropdown__menu {
  list-style: none;
  padding: var(--size-2) 0;
  background-color: var(--dropdown-bg);
  border: var(--dropdown-border-size) solid var(--dropdown-border);
  margin: 0;
  z-index: var(--layer-top);
}

.dropdown__item {
  position: relative;
  display: block;
  white-space: nowrap;
}

.dropdown__item > button,
.dropdown__item > input,
.dropdown__item > a,
.dropdown__item > span,
.dropdown__item .dropdown__action {
  position: relative;
  display: block;
  min-width: 100%;
  text-align: inherit;
  background-color: transparent;
  color: var(--dropdown-text);
  padding: var(--size-2) var(--size-3);
  font-size: var(--scale-0);
  border: none;
  outline: none;
  text-decoration: none;
  z-index: 1;
}
.dropdown__item > button:disabled,
.dropdown__item > .button:disabled,
.dropdown__item > input:disabled,
.dropdown__item > a[disabled],
.dropdown__item > span:disabled,
.dropdown__item .dropdown__action:disabled {
  background-color: var(--dropdown-bg);
  color: var(--dropdown-text);
  cursor: not-allowed;
  opacity: 0.6;
}
.dropdown__item:hover::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--dropdown-text);
  opacity: 0.1;
  z-index: 0;
}