Icon: Clock

// add icons to this array with their filename and type,
// the loop at the bottom of the file will create classes for them

$icons: (
	//'facebook': 'svg',
	//'instagram': 'svg',
	//'twitter': 'svg',
	//'linkedin': 'svg',
	//'youtube': 'svg',
	//'external-primary': 'svg',
	//'phone': 'svg',
	//'mail': 'svg',
	//'pin': 'svg',
);

.icon {
	position: relative;
	display: inline-block;
	width: 1em;
	height: 1em;
	text-align: center;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	vertical-align: baseline;
	top: 0.1em;

	svg,
	img {
		display: block;
		width: 100%;
		max-height: 100%;
		vertical-align: middle;
	}

	svg {
		height: 100%;
		//fill: #000;
	}

	&:before {
		font-size: 1em;
		display: inline-block;
	}

	@each $name, $extension in $icons {
		&--#{$name} {
			background-image: url('../img/icon-#{$name}.#{$extension}');
		}
	}

	// Layout

	&--margin-before {
		margin-inline-start: 0.35em;
	}

	&--margin-after {
		margin-inline-end: 0.35em;
	}

	// Themes

	&--primary {
		svg, path {
			fill: $primary !important;
		}
	}

	&--secondary {
		svg, path {
			fill: $secondary !important;
		}
	}

	&--tertiary {
		svg, path {
			fill: $tertiary !important;
		}
	}

	// Variant generator
	// (see loop at top)

	//@each $name, $extension in $icons {
	//	&--#{$name} {
	//		background-image: url('../img/icon-#{$name}.#{$extension}');
	//	}
	//}

	// Special

	@at-root {
		a, button {
			&:where(:has(.svgHeart)) {
				path {
					fill: rgba(white, 0);
					stroke-width: 2;
					stroke: $grey;
					transition: all 100ms;
				}

				&:hover, &:focus {
					path {
						fill: rgba($pink, 0.5);
						stroke-width: 0;
					}
				}

				&:active {
					path {
						fill: $pink;
						stroke-width: 0;
					}
				}
			}

			&:where(:has(.svgHeart--filled)) {
				path {
					transition: all 100ms;
				}

				&:hover, &:focus {
					path {
						fill: rgba($pink, 0.5);
						stroke-width: 0;
					}
				}

				&:active {
					path {
						fill: rgba(white, 0);
						stroke-width: 2;
					}
				}
			}
		}
	}
}