/* Components: Cards */

@utility card {
	border-radius: var(--radius-container);

	&a {
		/* Transitions (all) */
		transition-property: all;
		transition-timing-function: var(--default-transition-timing-function);
		transition-duration: var(--default-transition-duration);

		@variant hover {
			filter: brightness(95%);
			@variant dark {
				filter: brightness(110%);
			}
		}
	}
}

@utility card-hover {
	/* Transitions (all) */
	transition-property: all;
	transition-timing-function: var(--default-transition-timing-function);
	transition-duration: var(--default-transition-duration);

	@variant hover {
		filter: brightness(95%);
		@variant dark {
			filter: brightness(110%);
		}
	}
}