card.css 833 B

1234567891011121314151617181920212223242526272829
  1. [data-component="card"] {
  2. width: 100%;
  3. display: flex;
  4. flex-direction: column;
  5. background-color: var(--surface-inset-base);
  6. border: 1px solid var(--border-weaker-base);
  7. transition: background-color 0.15s ease;
  8. border-radius: var(--radius-md);
  9. padding: 6px 12px;
  10. overflow: clip;
  11. &[data-variant="error"] {
  12. background-color: var(--surface-critical-weak);
  13. border: 1px solid var(--border-critical-base);
  14. color: rgba(218, 51, 25, 0.6);
  15. /* text-12-regular */
  16. font-family: var(--font-family-sans);
  17. font-size: var(--font-size-small);
  18. font-style: normal;
  19. font-weight: var(--font-weight-regular);
  20. line-height: var(--line-height-large); /* 166.667% */
  21. letter-spacing: var(--letter-spacing-normal);
  22. &[data-component="icon"] {
  23. color: var(--icon-critical-active);
  24. }
  25. }
  26. }