@layer components {
  .dropdown {
    position: relative;
  }

  .dropdown__trigger {
    display: flex;
    align-items: center;
    gap: var(--dropdown-trigger-gap, var(--block-space-half));
    color: var(--dropdown-trigger-color, var(--color-gray-darker));
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;

    @media (any-hover: hover) {
      &:hover {
        color: color-mix(in oklch, var(--dropdown-trigger-color, var(--color-gray-darker)), transparent 30%);
      }
    }
  }

  .dropdown__menu {
    display: none;
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: 100%;
    margin-block-start: var(--dropdown-offset, var(--block-space-half));
    inline-size: var(--dropdown-width, 14rem);
    background-color: var(--color-white);
    border: var(--border-standard);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: var(--z-dropdown);
    overflow: hidden;
  }

  /* Toggle via Stimulus controller (replaces :focus-within) */
  .dropdown__menu--open {
    display: block;
  }

  .dropdown__header {
    padding: var(--block-space-half) var(--block-space);
    font-size: var(--text-normal);
    color: var(--color-gray-darker);
    border-block-end: var(--border-subtle);
    background-color: var(--color-gray-lightest);
  }

  .dropdown__name {
  }

  .dropdown__email {
    font-size: var(--text-small);
    color: var(--color-gray-dark);
  }

  .dropdown__item {
    display: block;
    inline-size: 100%;
    padding: var(--block-space-half) var(--block-space);
    font-size: var(--text-small);
    color: var(--color-gray-darker);
    text-align: start;
    background: none;
    border: none;
    cursor: pointer;

    @media (any-hover: hover) {
      &:hover {
        background-color: var(--color-gray-lightest);
      }
    }
  }

  .dropdown__item--negative {
    color: var(--color-red);
  }

  .dropdown__theme-toggle {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: var(--block-space-half);
    border-block-start: var(--border-subtle);
  }
}