@layer components {
  .secret__summary {
    display: flex;
    inline-size: fit-content;
    align-items: center;
    gap: var(--space-4);
    min-block-size: var(--tap-min);
    list-style: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .secret__summary::-webkit-details-marker {
    display: none;
  }

  .secret__mask,
  .secret__value {
    font: inherit;
  }

  .secret__mask {
    letter-spacing: var(--tracking-caps);
    color: var(--color-ink-muted);
  }

  .secret__value {
    color: var(--color-ink);
    user-select: all;
    overflow-wrap: anywhere;
  }

  .secret__summary > .icon {
    color: var(--color-link);
  }

  .secret__value,
  .secret__summary > .icon--eye-slash,
  .secret[open] .secret__mask,
  .secret[open] .secret__summary > .icon--eye {
    display: none;
  }

  .secret[open] .secret__value {
    display: inline;
  }

  .secret[open] .secret__summary > .icon--eye-slash {
    display: inline-block;
  }
}