.dropMenuTrigger {
  // custom button styling
  &[class~='btn'] {
    --rgb-bg-enter: var(--rgb-ui-2);
    --rgb-bg-active: var(--rgb-ui-3);
    --rgb-fg: var(--rgb-bg-11);
    --rgb-fg-enter: var(--rgb-ui-11);
    --rgb-fg-active: var(--rgb-ui-12);
    border-color: transparent;
    padding: 0 1em;
    border-radius: 8px;
    box-shadow: var(--ring-shadow, 0 0 transparent), var(--drop-shadow, 0 0 transparent);
    --ring-shadow: 0 0 0 var(--ring-width, 4px) rgba(var(--ring-rgb), var(--ring-alpha, 1));
    --ring-alpha: 0;
    --ring-rgb: var(--bd-rgb);
    &[class~='btn-solid'] {
      // TODO: use --bg-is-dark variable to determine these styles; should be white button on dark bg
      --rgb-bg: var(--rgb-ui-7);
      --rgb-bg-enter: var(--rgb-ui-8);
      --rgb-bg-active: var(--rgb-ui-9);
      --rgb-fg: var(--rgb-bg-1);
      --rgb-fg-enter: var(--rgb-ui-2);
      --rgb-fg-active: var(--rgb-ui-3);
    }
  }
}

.dropMenuContent {
  --bd-width: 1px;
  --bd-offset: calc(var(--bd-width) * 1.4142);
  --arrow-size: 10px;
  --column-gap: 50px;
  --parent-size: 100%;
  font-size: 15px;
  position: absolute;
  top: 100%;
  left: 50%;
  --translateX: -50%;
  transform: translate(var(--translateX, 0), var(--translateY, 0));
  &.align-right {
    --translateX: 0%;
    left: initial;
    right: var(--bd-width);
  }
  &.align-left {
    --translateX: 0%;
    left: var(--bd-width);
    right: unset;
  }
  // TRANSITIONS
  opacity: 0;
  --translateY: 10px;
  --xn-timing-function: ease-in;
  --xn-duration: 125ms;
  @include xn(false, opacity, transform); // hidden XN state and props
  &[aria-hidden='false'] {
    @include xn(true); // visible XN state
    opacity: 1;
    --xn-timing-function: ease-out;
    --translateY: 0px;
  }
}

// visible container, styled
.dropMenuPanel {
  position: relative;
  padding: 1.25em calc(var(--column-gap) / 2) 1em;
  // create spacing from trigger to panel
  margin-top: 5px;
  transform: translateY(10px);
  > ul > li {
    width: 12em; // comfortable width
  }
  /* BORDER */
  --rgb-bd: var(--rgb-bg-4);
  /* RADIUS */
  border-radius: 6px;
  /* SHADOW */
  --shadow-l: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  box-shadow: var(--shadow-xl);

  // TRIANGLE PSEUDO-ELEMENTS
  &::after,
  &::before {
    content: '';
    display: block;
    height: 0;
    width: 0;
    position: absolute;
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    pointer-events: none;
    transform: translateX(var(--translateX, 0)) translateY(var(--translateY, 0));
    --translateX: -50%;
  }
  &::after {
    border-bottom-color: rgba(var(--rgb-bg-1), 1);
    border-width: calc(var(--arrow-size));
  }
  &::before {
    border-bottom-color: rgba(var(--rgb-bg-4), 1);
    border-width: calc(var(--arrow-size) + var(--bd-offset));
  }
  .align-right > & {
    &::after,
    &::before {
      left: initial;
      right: calc(var(--arrow-size) * 4);
      --translateX: 0;
    }
    &::before {
      --translateX: var(--bd-offset);
    }
  }
  .align-left > & {
    &::after,
    &::before {
      right: initial;
      left: calc(var(--arrow-size) * 4);
      --translateX: 0;
    }
    &::before {
      --translateX: calc(var(--bd-offset) * -1);
    }
  }
}

.dropMenuList {
  padding: 0;
  margin: 0;
  list-style: none;
  margin-left: -1px;
  margin-right: -1px;
}

.dropMenuListItem {
  padding: 0;
  margin: 0;
  list-style: none;
}

.dropSubmenuLabel {
  padding: 0;
  margin: 0;
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 700;
}

.dropSubmenuList {
  margin-top: 8px;
}

.dropMenuLink {
  &[class~='link'] {
    --rgb-fg: var(--rgb-fg-11);
    --rgb-bg-enter: var(--rgb-ui-2);
    --rgb-bg-active: var(--rgb-ui-3);
    text-decoration: none;
    display: block;
    padding: 0.4em calc(var(--column-gap) / 2);
    margin: 0 calc(var(--column-gap) / -2);
    border-left: 3px solid transparent;
    &:enter {
      --bg-alpha: 1;
    }
    &:focus {
      outline: 0;
    }
    &:hover,
    &:focus-visible {
      text-decoration: none;
      border-left: 3px solid rgb(var(--rgb-ui));
    }
  }
}