[data-component="card"] {
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--surface-inset-base);
  border: 1px solid var(--border-weaker-base);
  transition: background-color 0.15s ease;
  border-radius: 8px;
  padding: 6px 12px;
  overflow: clip;

  &[data-variant="error"] {
    background-color: var(--surface-critical-weak);
    border: 1px solid var(--border-critical-base);
    color: rgba(218, 51, 25, 0.6);

    /* text-12-regular */
    font-family: var(--font-family-sans);
    font-size: var(--font-size-small);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-large); /* 166.667% */
    letter-spacing: var(--letter-spacing-normal);

    &[data-component="icon"] {
      color: var(--icon-critical-active);
    }
  }
}