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

    & > button:has(> span) {
      gap: var(--spacing-sm);

      svg {
        transform: rotate(90deg);
      }
    }
  }

  el-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;
    transform-origin: top right;
    transition-property: opacity, scale, transform, display, overlay;
    transition-duration: var(--dialog-transition-duration);
    transition-behavior: allow-discrete;

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

    &[data-enter] {
      transition-duration: var(--dialog-enter-duration);
      transition-timing-function: var(--ease-out);
    }

    &[data-leave] {
      transition-duration: var(--dialog-leave-duration);
      transition-timing-function: var(--ease-in);
    }

    /* Direct children and form-wrapped items share one rule set. */
    & > a,
    & > button,
    & > el-option,
    & > form,
    & > form > button,
    & > 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,
      &:active {
        --background-color: var(--hover-color);
        background: var(--hover-color);
      }

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

      &[aria-current="true"],
      &[aria-selected="true"] {
        font-weight: 600;
        background: var(--item-hover);
      }
    }

    & > form {
      display: block;
      padding: 0;
      background: transparent;
      cursor: default;

      &:hover {
        background: transparent;
      }
    }

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

}