.Dropdown {
  .Link.is-black;

  --Dropdown-markerSize: 0px;
  --Link-hoverDecoration: none;

  background: var(--color-white);
  box-shadow: var(--shadow-3);
  max-height: 45vh;
  max-width: 45vw;
  opacity: 0;
  overflow: auto;
  padding: var(--gap-s) 0;
  position: fixed;
  transform: scaleY(0);
  transform-origin: top;
  transition:
    opacity var(--time-xs) var(--ease-in),
    transform var(--time-s) var(--ease-out),
    visibility var(--time-s);
  visibility: hidden;
  z-index: 2000000;

  &[data-tether-rx='l'] {
    left: var(--Tether-rl) /*rtl:ignore*/;
  }

  &[data-tether-rx='r'] {
    right: calc(100vw - var(--Tether-rl) - var(--Tether-rw)) /*rtl:ignore*/;
  }

  &[data-tether-ry='t'] {
    max-height: calc(
      100vh - var(--Tether-rt) - var(--Tether-rh) - var(--gap-xl)
    );
    top: calc(var(--Tether-rt) + var(--Tether-rh) + var(--Dropdown-markerSize));
    transform-origin: top;
  }

  &[data-tether-ry='b'] {
    bottom: calc(100vh - var(--Tether-rt) + var(--Dropdown-markerSize));
    max-height: calc(
      var(--Tether-rt) - var(--Page-headerBottom) - var(--gap-xl)
    );
    transform-origin: bottom;
  }
}

.Dropdown.is-open {
  opacity: 1;
  transform: none;
  visibility: visible;

  /*
  When mouse is not hovered within menu, place accent color on whichever menu item has 
  keyboard focus.
  */
  &:not(:hover) {
    [role='menuitem']:focus {
      background: var(--color-dominant1);
    }
  }
}

.Dropdown-item {
  background: transparent;
  display: block;
  font-size: inherit;
  padding: var(--gap-s) var(--gap-l);
  text-align: left;
  width: 100%;

  &:hover {
    background: var(--color-dominant1);
  }
}
