.card { background-color: transparent; border: 1px solid rgb(from var(--mantine-color-secondaryColor-filled) r g b / calc(var(--opacity, 1) * 0.38)); } .root { min-width: 0; min-height: 0; overflow: hidden; } .testAction { margin-inline-start: auto; flex-shrink: 0; opacity: 0; transition: opacity 120ms ease; } .root:hover .testAction, .root:focus-within .testAction { opacity: 1; } .indexerRow { min-height: 24px; padding: 2px 4px; border-radius: var(--mantine-radius-xs); &:hover, &:focus-within { background-color: transparent; } } .indexerLink { display: flex; align-items: center; align-self: stretch; min-width: 0; flex: 1; } @media (any-pointer: coarse) { .testAction { opacity: 1; } .indexerRow { min-height: 44px; padding-block: 8px; } } @media (prefers-reduced-motion: reduce) { .testAction { transition: none; } }