@layer components {
  .dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;

    & > .dropdown-trigger {
      --text-color: var(--gray-950);
      --link-color: var(--gray-950);
    }
  }

  .dropdown-menu {
    --anchor-gap: var(--spacing-sm);
    --item-text: var(--gray-950);
    --item-hover: var(--gray-100);

    margin: 0;
    padding: 0;
    min-width: calc(var(--baseline) * 28);
    border: 0;
    border-radius: var(--radius-default);
    background: var(--surface-color);
    box-shadow:
      0 0 0 1px var(--border-color),
      0 4px 16px color-mix(in oklch, black 10%, transparent);
    color: var(--text-color);
    overflow: hidden;
    transition:
      opacity 120ms ease,
      transform 120ms ease,
      display 120ms allow-discrete;
    transform-origin: top right;

    &:popover-open {
      opacity: 1;
      transform: scale(1);
    }

    &[data-closed] {
      opacity: 0;
      transform: scale(0.95);
    }

    /* Direct children and form-wrapped items share one rule set. */
    & > a,
    & > button,
    & > .link,
    & > .dropdown-item,
    & > .dropdown-item-form,
    & .dropdown-item-form > button,
    & .dropdown-item-form > input[type="submit"] {
      --text-color: var(--item-text);
      --link-color: var(--item-text);
      --hover-color: var(--item-hover);
      --background-color: transparent;
      --border-color: transparent;

      display: flex;
      align-items: center;
      width: 100%;
      margin: 0;
      padding-block: var(--spacing-sm);
      padding-inline: var(--spacing-md);
      border: 0;
      border-radius: 0;
      background: var(--background-color);
      color: var(--text-color);
      font-size: var(--font-size);
      line-height: var(--line-height);
      text-align: start;
      text-decoration: none;
      cursor: pointer;
      min-height: var(--line-height);
      height: auto;
      box-shadow: none;

      /* Neutralize global link ::before hover wash. */
      &::before {
        content: none;
      }

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

      &:focus-visible {
        outline: 2px solid var(--text-color);
        outline-offset: -2px;
        z-index: 1;
      }
    }

    & > .dropdown-item-form {
      display: block;
      padding: 0;
      background: transparent;
      cursor: default;

      &:hover {
        background: transparent;
      }
    }

    & .dropdown-item.danger,
    & .dropdown-item-form.danger > button,
    & .dropdown-item-form.danger > input[type="submit"] {
      --text-color: var(--danger-color);
      --link-color: var(--danger-color);
      --hover-color: var(--danger-hover-background);
    }
  }

  .dropdown-separator {
    height: 1px;
    margin-block: var(--spacing-sm);
    margin-inline: 0;
    background: var(--border-color);
    border: 0;
  }
}