.dropdown {
  $ref: &;
  position: relative;
  display: inline-flex;

  & ul {
    list-style: none;
  }

  & > #{$ref}__menu,
  & > ul {
    --background-color: hsl(var(--neutral-color-h) var(--neutral-color-variation-1-s) var(--neutral-color-variation-1-l) / 0.7);
    --box-shadow: var(--neutral-shadow-alt);

    display: flex;
    position: absolute;
    flex-direction: column !important;
    justify-content: inherit;
    align-items: inherit;
    visibility: collapse;
    top: 100%;
    left: 0;

    min-width: max-content;
    width: 100%;
    max-height: 0;
    height: 0;
    margin: 0;
    padding: var(--half-spacing) 0;
    z-index: 5500;

    background-color: var(--background-color);
    box-shadow: var(--box-shadow);
    opacity: 0;
    transition: all 0.25s ease-in;

    & > #{$ref}__item,
    & li {
      display: flex;
      align-items: center;
      justify-content: inherit;
      width: 100%;
      padding: 0 var(--half-spacing);
    }

    & > #{$ref}__item #{$ref}__menu,
    & li ul {
      top: 0;
      left: 100%;
      width: max-content;
    }

    &.expanded {
      visibility: visible;
      max-height: 50em;
      height: auto;
      opacity: 1;
    }
  }

  &:not([data-js-dropdown]):hover {
    & > #{$ref}__menu,
    & > ul {
      visibility: visible;
      max-height: 50em;
      height: auto;
      opacity: 1;
    }
  }

  &__menu--left {
    left: calc(-100% - var(--half-spacing));
  }
}