.dropdownButton__trigger {
  &:focus-visible {
    outline: none;
  }

  &[data-focus-visible="true"] {
    outline: revert;
  }
}

.dropdownButton__modalMenuOverlay {
  position: fixed;
  z-index: var(--elevation--overlay);
  inset: 0;

  background-color: rgb(var(--background--neutral-full-default--light) / var(--blend--medium--light));
  backdrop-filter: blur(2px);
}

.dropdownButton__modalMenuOverlay--fadeIn {
  @keyframes dropdownUnderlayFadeIn {
    from {
      opacity: var(--blend--full--light);
    }
    to {
      opacity: var(--blend--solid--light);
    }
  }

  animation: dropdownUnderlayFadeIn 0.3s;
}

.dropdownButton__modalMenuOverlay--fadeOut {
  @keyframes dropdownUnderlayFadeOut {
    from {
      opacity: var(--blend--solid--light);
    }
    to {
      opacity: var(--blend--full--light);
    }
  }

  animation: dropdownUnderlayFadeOut 0.3s;
}

.dropdownButton__modalMenu {
  pointer-events: none;

  position: fixed;
  z-index: var(--elevation--sidebar);
  right: 0;
  bottom: 0;
  left: 0;

  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.dropdownButton__modalMenu--fadeIn {
  @keyframes dropdownListContainerFadeIn {
    from {
      max-height: 0;
    }
    to {
      max-height: 65vh;
    }
  }

  animation: dropdownListContainerFadeIn 0.3s;
}

.dropdownButton__modalSubmenu {
  pointer-events: all;

  display: flex;
  flex-direction: column;

  max-height: 65vh;
  padding: 0 1rem;

  background-color: rgb(var(--background--neutral-base-default--light));

  // Hide all menus that are not the most nested menu
  // (~ * & matches submenu popovers portalled inside react-aria's display: contents wrapper)
  &:has(~ &),
  &:has(~ * &) {
    position: absolute;
    transform: translate(-150vw, 0);
  }
}

.dropdownButton__modalSubmenu--popover {
  // We position the popover ourselves
  position: relative !important;
  top: unset !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

  width: 100% !important;
}

.dropdownButton__modalSubmenu--fadeOut {
  @keyframes dropdownListContainerFadeOut {
    from {
      max-height: 65vh;
    }
    to {
      max-height: 0;
    }
  }

  animation: dropdownListContainerFadeOut 0.3s;
}

.dropdownButton__modalSubmenuInner {
  overflow: hidden;
  display: flex;
  flex-direction: column;

  padding: 1rem 0;

  border-bottom: 1px solid rgb(var(--border--neutral-low-default--light))
}

.dropdownButton__modalSubmenuHeader {
  cursor: pointer;

  display: flex;
  align-items: center;

  width: 100%;
  margin-bottom: var(--margin--lg);
  padding: var(--padding--xs) var(--padding--sm);

  background: transparent;
  border: none;

  &:hover,
  &:focus-visible {
    outline: none;
  }

  > span:last-child {
    width: 100%;
    margin: 0;
  }
}

.dropdownButton__list {
  overflow-y: auto;
  display: flex;
  flex-direction: column;

  max-height: calc(100vh - 32px);

  background-color: rgb(var(--background--neutral-base-default--light));
  border: 1px solid rgb(var(--border--neutral-low-default--light));
  box-shadow: var(--shadow--medium-soft--light);

  &:hover,
  &:focus-visible {
    outline: none;
  }
}

.dropdownButton__list--mobileView {
  gap: var(--gap--sm);
  background: rgb(var(--background--neutral-base-default--light));
  border: none;
  box-shadow: var(--shadow--medium-soft--light);
}

.dropdownButton__listItem {
  cursor: pointer;

  position: relative;

  display: inline-flex;
  gap: var(--gap--xs);
  align-items: center;

  min-width: 70px;

  color: rgb(var(--foreground--neutral-high-default--light));
  white-space: nowrap;

  background: rgb(var(--background--neutral-base-default--light));

  &:not(:last-child) {
    border-bottom: 1px solid rgb(var(--border--neutral-low-default--light));
  }

  // Override element-level anchor hover styles
  &:hover {
    color: rgb(var(--foreground--neutral-high-default--light));
    text-decoration: none;
  }

  &:focus,
  &:focus-visible {
    outline: none;
  }

  &[data-hovered="true"],
  &[data-focused="true"] {
    text-decoration: none;
    background: rgb(var(--background--neutral-low-hovered--light));
    outline: none;
  }

  &[data-focus-visible="true"] {
    outline: revert;
  }
}

.dropdownButton__listItem--mobileView {
  padding: 3px var(--padding--sm);
  border: 1px solid rgb(var(--border--neutral-low-default--light));
}

.dropdownButton__listItem--action {
  background-color: rgb(var(--background--main-medium-default--light));
}

.dropdownButton__listItemLabel {
  display: inline-flex;
  gap: var(--gap--xs);
  align-items: center;

  margin-right: auto;
  padding: var(--padding--xs);

  & > .typography {
    margin: 0;

    & + .typography {
      color: rgb(var(--foreground--neutral-high-default--light));
    }
  }
}

.dropdownButton__listItemLabel--action {
  & > .typography {
    color: rgb(var(--foreground--neutral-full-default--dark));

    & + .typography {
      color: rgb(var(--foreground--neutral-full-default--dark));
    }
  }
}

.dropdownButton__listItemLabel--mobileView {
  margin-left: auto;
}

.dropdownButton__listItemSubmenuIndicator {
  display: flex;
}

.dropdownButton__listItemSubmenuIndicator--mobileView {
  position: absolute;
  right: 6px;
}