.dropdown {
  position: relative;
  width: fit-content;
}

.dropdown-trigger {
  list-style: none;
  cursor: pointer;
}

.dropdown-trigger::-webkit-details-marker {
  display: none;
}

.dropdown-icon {
  display: flex;
  width: 8px;
  transition: transform 150ms ease;
}

.dropdown-icon svg {
  width: 100%;
  height: auto;
}

.dropdown[open] .dropdown-icon {
  transform: rotate(180deg);
}

.dropdown-options {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: calc(var(--s-3) * -1);
  min-width: calc(100% + var(--s1));
  padding: var(--s-4);
  border: 1px solid color-mix(in srgb, var(--color-1) 12%, var(--color-4));
  border-radius: 14px;
  background-color: var(--color-4);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--color-1) 18%, transparent);
}

.dropdown-option {
  display: block;
  width: 100%;
  padding: var(--s-2) var(--s-1);
  border-radius: 10px;
  text-align: left;
  white-space: nowrap;
}

.dropdown-option:hover,
.dropdown-option:focus-visible {
  background-color: var(--color-3);
}