$cardTypes: (
	product: (
		base: #FEE5C8,
		text: #C94C0A,
		button : #EC7B3F,
		shadow: #F6D0AD,
		border: #EC7B3F
	),
	info: (
		base: #BDD6DE,
		text: #3B6977,
		button : #4591A9,
		shadow: #B9D3CF,
		border: #4591A9
	),
	other: (
		base: #DBE2AE,
		text: #A0B809,
		button : #A0B809,
		shadow: #DBE2AD,
		border: #A0B809
	),
	seen: (
		base: #fff,
		text: #605D5D,
		button: #605D5D,
		shadow: rgba(#fff, 0),
		border: #8a8a8a
	),
	disabled: (
		base: #F0F0F0,
		text: #CDCCCC,
		button: rgba(#fff, 0),
		shadow: rgba(#fff, 0),
		border: #F0F0F0
	)
);

@mixin colorCards($prefix: '--') {
	@each $name, $theme in $cardTypes {
		&#{$prefix}#{$name} {
			color: map_get($theme, text);
			background-color: map_get($theme, base);
			border-color: map_get($theme, base);
			box-shadow: 0 30px 30px -10px desaturate(rgba(map_get($theme, shadow), 0.5), 15%);

			@media (max-width: $mobile) {
				box-shadow: 0 25px 20px -10px desaturate(rgba(map_get($theme, shadow), 0.7), 5%);
			}

			&:hover {
				border-color: map_get($theme, border);
				box-shadow: 0 35px 40px -20px desaturate(rgba(map_get($theme, shadow), 0.5), 15%);

				@media (max-width: $mobile) {
					box-shadow: 0 5px 12px rgba(map_get($theme, shadow), 0.5);
				}
			}

			&:active,
			&:focus {
				box-shadow: none;
				outline: none;

				@media (max-width: $mobile) {
					box-shadow: 0px 4px 12px rgba(map_get($theme, shadow), 1);
				}
			}

			.card__button {
				background-color: map_get($theme, button);
			}
		}
	}
}

.card__image {
	width: 140px;
	height: 90px;
	background-image: linear-gradient(180deg, #FFFFFF 0%, #ECECEC 100%);
	border-radius: 6px;
	overflow: hidden;
}

.card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.card__title {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	margin: 10px 0;
	max-width: 100%;
	max-height: 4em;
	font-weight: 500;
	font-size: 15px;
	line-height: 1.333333;
	word-break: break-word;
	overflow: hidden;

	@media (max-width: $mobile) {
		margin: 12px 0 8px;
		max-height: 54px;
		font-weight: 400;
		font-size: 14px;
		line-height: 18px;
	}
}

.card__title span {
	margin: auto 0;
}

button.card__button {
	@include hover;
	color: $bg-main;
	font-weight: 400;
	padding: 5px 10px;
	min-width: 120px;
	font-size: 12px;
	line-height: 16px;
	background-color: $accent-main;
	border-radius: 8px;

	&:hover,
	&:active,
	&:focus {
		color: $bg-main;
	}
}

.card__note {
	display: flex;
	align-items: center;
	font-weight: 400;
	font-size: 12px;
	line-height: 30px;
	color: #B2C5B7;
}

.card__note svg {
	display: block;
	margin-left: 9px;
}

.card {
	@include colorCards;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	box-sizing: border-box;
	padding: 10px;
	width: 160px;
	min-height: 222px;
	color: #605D5D;
	background-color: $bg-main;
	border: 1px solid $bg-main;
	border-radius: 8px;
	transition: all 0.3s ease;
	cursor: pointer;

	@media (max-width: $mobile) {
		min-height: 216px;
	}
}

.card--disabled {
	box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.25);
	cursor: default;

	&:hover,
	&:active,
	&:focus {
		box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.25);
	}
}

.card--disabled .card__title {
	max-height: 90px;
	font-size: 13px;
	line-height: 17px;

	@media (max-width: $mobile) {
		max-height: 84px;
	}
}

.card--disabled .card__image {
	filter: grayscale(100%);
	opacity: 0.5;
}
