@import '../base/content';
@import '../mixins/surface';
@import '../mixins/elevation';

.card {
	@include surface;
	@include elevation(1);

	--radius: var(--container-radius); // todo : set this in a way that makes sense

	&.interactive {
		cursor: pointer;
		user-select: none;

		&:hover {
			@include elevation(2);
		}

		&:active {
			@include elevation(8);
		}
	}
}