@layer components {
  .credential {
    border-block-start: var(--border);
    list-style: none;

    &:last-child {
      border-block-end: var(--border);
    }
  }

  .credential__link {
    align-items: center;
    block-size: 1.75lh;
    color: currentcolor;
    display: flex;
    gap: 1ch;
    padding-inline: 1ch;

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

        .credential__arrow {
          opacity: 0.66;
        }
      }
    }
  }

  .credential__arrow {
    margin-inline-start: auto;
    opacity: 0;
  }

  [data-passkey-errors] [data-passkey-error] {
    display: none;
  }

  [data-passkey-errors][data-passkey-error-state="error"] [data-passkey-error="error"],
  [data-passkey-errors][data-passkey-error-state="cancelled"] [data-passkey-error="cancelled"] {
    display: block;
  }
}