tool-count-label.css 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. [data-component="tool-count-label"] {
  2. display: inline-flex;
  3. align-items: baseline;
  4. white-space: nowrap;
  5. gap: 0;
  6. [data-slot="tool-count-label-before"] {
  7. display: inline-block;
  8. white-space: pre;
  9. line-height: inherit;
  10. }
  11. [data-slot="tool-count-label-word"] {
  12. display: inline-flex;
  13. align-items: baseline;
  14. white-space: pre;
  15. line-height: inherit;
  16. }
  17. [data-slot="tool-count-label-stem"] {
  18. display: inline-block;
  19. white-space: pre;
  20. }
  21. [data-slot="tool-count-label-suffix"] {
  22. display: inline-grid;
  23. grid-template-columns: 0fr;
  24. opacity: 0;
  25. filter: blur(calc(var(--tool-motion-blur, 2px) * 0.42));
  26. overflow: hidden;
  27. transform: translateX(-0.04em);
  28. transition-property: grid-template-columns, opacity, filter, transform;
  29. transition-duration: 250ms, 250ms, 250ms, 250ms;
  30. transition-timing-function:
  31. var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1)), ease-out, ease-out,
  32. var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
  33. }
  34. [data-slot="tool-count-label-suffix"][data-active="true"] {
  35. grid-template-columns: 1fr;
  36. opacity: 1;
  37. filter: blur(0);
  38. transform: translateX(0);
  39. }
  40. [data-slot="tool-count-label-suffix-inner"] {
  41. min-width: 0;
  42. overflow: hidden;
  43. white-space: pre;
  44. }
  45. }
  46. @media (prefers-reduced-motion: reduce) {
  47. [data-component="tool-count-label"] [data-slot="tool-count-label-suffix"] {
  48. transition-duration: 0ms;
  49. }
  50. }