[id*="dropdown-menu"] {
  @apply flex flex-col py-0 mx-3.5 md:mx-0 border-t-0 border-gray-3 cursor-pointer;

  &[aria-hidden="true"] {
    @apply hidden md:flex;
  }
}

[data-target*="dropdown"] {
  @apply w-full flex items-center justify-between first-of-type:[&>svg]:block last-of-type:[&>svg]:hidden;

  & > span {
    @apply hidden font-semibold text-secondary;

    &:only-of-type,
    &.is-active {
      @apply flex items-center gap-2 [&_svg]:fill-current;
    }
  }

  > svg {
    @apply flex-none text-secondary fill-current;
  }

  &[aria-expanded="false"] > svg:last-of-type,
  &[aria-expanded="true"] > svg:first-of-type {
    @apply hidden;
  }

  &[aria-expanded="true"] > svg:last-of-type,
  &[aria-expanded="false"] > svg:first-of-type {
    @apply block;
  }
}

[data-target="dropdown-menu-participatory-space"],
[data-target="dropdown-menu-order"],
[data-target="dropdown-menu-resource"],
[data-target="dropdown-menu-sidebar"] {
  @apply md:hidden;
}

[data-target="dropdown-menu-language-chooser"] {
  & > span {
    @apply block font-semibold text-black text-xs;
  }

  > svg {
    @apply w-5 h-6 flex-none text-xs font-normal text-black fill-current;
  }

  & > ul {
    @apply w-6 bg-gray;

    > li {
      @apply w-6 bg-gray;
    }
  }
}

[data-target="dropdown-menu-language-chooser-mobile"] {
  & > span {
    @apply block text-black font-normal text-sm;
  }

  > svg {
    @apply w-5 h-6 flex-none text-xs font-normal text-black fill-current;
  }

  & > ul {
    @apply w-6 bg-gray;

    > li {
      @apply w-6 bg-gray;
    }
  }
}

.dropdown {
  @apply absolute border-2 border-gray-3 rounded-md min-w-max p-1 drop-shadow-md text-left z-10 after:content-[''] after:absolute after:left-0 after:top-0 after:w-full after:h-full after:bg-white;

  & > * {
    @apply relative z-10;
  }

  &__item {
    @apply flex rounded;

    font-size: 14px;

    svg {
      @apply w-4 h-4 flex-none text-secondary fill-current;
    }

    .dropdown__button {
      @apply font-normal button button__sm button__text button__text-secondary w-full flex justify-start !p-2;

      span {
        @apply mr-4 font-normal;
      }

      &-disabled {
        @apply text-gray-2 font-normal w-full flex justify-start !p-2;

        svg {
          @apply text-gray-2 mr-1;
        }
      }
    }

    &:hover,
    &-hovered {
      > .dropdown__button {
        @apply text-white no-underline;

        span {
          @apply text-white;
        }

        svg {
          @apply fill-white;
        }
      }
    }
  }

  &__bottom {
    @apply top-full right-0;
  }

  &__right {
    @apply top-0 left-48;
  }

  &__action {
    @apply top-full left-0 md:right-0 md:left-auto;

    li {
      @apply border-none;
    }
  }
}
