.card {
  border: solid 1px var(--gray-4);
  background-color: var(--gray-1);
  border-radius: var(--radius-4);
  padding: var(--space-3);
  transition: background-color 100ms;
  &[data-variant='indicate'] {
    border-radius: var(--radius-5);
    box-shadow: var(--shadow-4);
    padding: var(--space-5);
  }
  &[data-variant='small'] {
  }
  &[data-inset='true'] {
    padding: 0;
  }
  &[data-clickable='true'] {
    cursor: pointer;
    & * {
      cursor: pointer;
    }
    &:active {
      background-color: var(--gray-4);
    }
  }
  &[data-selected='true'] {
    border-color: var(--gray-8);
    outline: solid 1px var(--gray-8);
  }
}
