@layer components {
  .menu-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 56px;
    padding: var(--space-2) var(--space-4);
    border: 0;
    border-top: 1px solid var(--line);
    background: none;
    color: var(--ink);
    font-weight: 500;
    text-align: start;
    text-decoration: none;
    cursor: pointer;

    & > .icon:first-child { color: var(--ink-muted); }
    & > .icon:last-child:not(:first-child) { margin-left: auto; color: var(--ink-faint); }
    &[aria-current="true"] > .icon:last-child { color: var(--accent); }
  }

  .card--list > :first-child.menu-row, .card--list > form:first-child .menu-row { border-top: 0; }
  .menu-row__text { flex: 1; min-width: 0; color: inherit; text-decoration: none; }
  .card__head + .menu-row, .card__head + form .menu-row { border-top: 1px solid var(--line); }
  .menu-row--danger, .menu-row--danger > .icon:first-child { color: var(--danger); }
}