// Component settings: Card
// ------------------------------------------

$c-card: (
	'label-bgcolor':		palette(neutral, 800),
	'label-color':			palette(neutral, 0),
	'label-bgcolor-hover':	palette(secondary, 500),
	'label-color-hover':	palette(neutral, 0),
	'arrow-color-hover':	palette(primary, 500),
	'bgcolor-hover':		palette(neutral, 1000),
	'info-bgcolor':			palette(neutral, 100),
);

// ------------------------------------------


.c-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	position: relative;
}

/*
 * Card that does some animations on hover
 */
.c-card--has-action {
	@include disableOutlineForMouse;
	overflow: hidden; // because of pseudo element
	z-index: 0;

	&::before,
	&::after {
		content: '';
		position: absolute;
		z-index: 1;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		opacity: 0;
		pointer-events: none;
	}

	// Shaded background (HIDDEN by default)
	&::before {
		background-color: rgba(map-get($c-card,'bgcolor-hover'), 0.92);
		background: radial-gradient(rgba(map-get($c-card,'bgcolor-hover'),0.8) 0%, rgba(map-get($c-card,'bgcolor-hover'),0.92) 100%);
		transform: translateX(-135%) rotate(-11deg) scale(1.3);
		transform-origin: center;
		transition-property: opacity, transform;
		transition-duration: 300ms;
		transition-delay: 100ms;
		transition-timing-function: cubic-bezier(0.45, 0.1, 0.3, 1);
	}

	// Arrow (HIDDEN by default)
	// Contains an SVG arrow icon in the background-image
	&::after {
		z-index: 2;
		width: 25px;
		margin: auto;
		background-image: svg-url('<svg viewBox="0 0 16 12" xmlns="http://www.w3.org/2000/svg"><path fill="#{map-get($c-card,'arrow-color-hover')}" d="M13.4 6.783H.762A.772.772 0 0 1 0 6c0-.432.341-.783.762-.783H13.4L9.623 1.336a.798.798 0 0 1 0-1.107.747.747 0 0 1 1.077 0l5.077 5.218a.798.798 0 0 1 0 1.106L10.7 11.771a.747.747 0 0 1-1.077 0 .798.798 0 0 1 0-1.107L13.4 6.783z"/></svg>');
		background-repeat: no-repeat;
		background-position: center;
		transform: scale(1.75);
		transition-property: opacity, transform;
		transition-duration: 200ms;
	}

	&:hover {
		// Shaded background (VISIBLE when hovered)
		&:before {
			opacity: 0.92;
			transform: rotate(-11deg) scale(1.3);
			transition-duration: 400ms;
			transition-delay: 50ms;
		}
		// Arrow (VISIBLE when hovered)
		&:after {
			opacity: 1;
			transform: none;
			transition-duration: 400ms;
			transition-delay: 200ms;
		}
	}
	&:focus {
		outline-color: map-get($c-card,'bgcolor-hover');
		outline-style: solid;
		outline-offset: 1px;
		outline-width: 2px;
	}
}

.c-card__picture {
	width: 100%;
	flex: auto;
	display: block;
}

.c-card__img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.c-card__label {
	@include font-size(xs);
	position: relative;
	z-index: 3;
	overflow: hidden;
	padding: 14px 10px 15px;
	text-align: center;
	font-weight: medium;
	text-transform: uppercase;
	color: map-get($c-card,'label-color');
	background-color: map-get($c-card,'label-bgcolor');
	transition-property: background;
	transition-duration: 400ms;

	.c-card--has-action:hover & {
		color: map-get($c-card,'label-color-hover');
	}

	// Colored background behind label (HIDDEN by default)
	&::before {
		content: '';
		position: absolute;
		z-index: -1;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: map-get($c-card,'label-bgcolor-hover');
		pointer-events: none;
		//transform: translateY(200%) rotate(5deg) scale(2);
		transform: translateY(300%) rotate(11deg) scale(1.5, 3);
		transform-origin: center;
		transition-property: opacity, transform;
		transition-duration: 300ms;
		transition-delay: 200ms;
		transition-timing-function: cubic-bezier(0.45, 0.1, 0.3, 1);

		.c-card--has-action:hover & {
			opacity: 1;
			transform: rotate(5deg) scale(2);
			transition-duration: 300ms;
			transition-delay: 0ms;
		}
	}
}

.c-card__info {
	padding: space(2) space(4);
	background-color: map-get($c-card,'info-bgcolor');
}
.c-card__heading {
	@include font(base);
	color: palette(neutral, 500);
}
.c-card__subheading {
	color: palette(neutral, 400);
}
.c-card__textline {
	color: palette(neutral, 400);

	// When it follows an element that's not like itself
	*:not(#{&}) + & {
		margin-top: space(2);
	}
}