@use "sass:math";
/* variables specific to current element */

$element-specific-variables: "";

.#{$namespace}linksIconBox {

	/* Save root element context for easy access if nesting is needed */

	$self: &;

	/* properties of current element  + media queries */
	display: flex;
	flex-direction: column;
	@include spacer-component-stack("xl");

	/* Pseudo Elements */

	&::before {
	}

	&::after {
	}

	/*
	Include elements that are linked to the current element but have to reside at the root level of the stylesheet
	(e.g: keyframes)
	*/
	@at-root {
	}


	/* children - write selector in full in comments in order to facilitate search */

	&__header {
		display: flex;
		@include media-breakpoint-up(lg) {
			flex-direction: column;
		}
	}

	&__headerText {

		display: flex;
		flex-direction: column;
		justify-content: center;

	}

	&__headerText {

		@include spacer-component-stack("xs");

	}

	// linksIconBox__inner
	&__body {

		flex-grow: 1;

	}

	// linksIconBox__icon
	&__icon {

		width: $links-icon-box-img-dimensions-global;
		height: $links-icon-box-img-dimensions-global;
		margin-right: $links-icon-box-img-spacing-global;

		svg,
		IMG {

			width: 100%;
			height: 100%;
			object-fit: cover;

		}

		@include media-breakpoint-up(lg) {
			width: $links-icon-box-img-dimensions-lg-global;
			height: $links-icon-box-img-dimensions-lg-global;
			margin-right: $links-icon-box-img-spacing-lg-global;
			margin-bottom: $links-icon-box-img-spacing-lg-global;
		}

	}

	&__bodyItem {

		& + & {
			margin-top: map-deep-get($token-spacer-stack-max-map, "sm");
		}

	}
	
	&__listItem {

		@include custom-prop-fallback("background-color","comp-link-item-background-color");
		@include custom-prop-fallback("color","comp-link-item-text-color");
		padding: map-deep-get($token-spacer-inset-map, "sm");
		border-radius: map-deep-get($token-radius-map, "8");
		display: flex;
		align-items: center;

		&:hover,
		&:focus {
			@media (hover: hover) {
				@include custom-prop-fallback("background-color","comp-link-item-hovered-background-color");
				@include custom-prop-fallback("color","comp-link-item-hovered-text-color");
			}
		}

	}

	&__listIcon {

		margin-right: map-deep-get($token-spacer-inline-map, "sm");
		pointer-events: none;

		@include media-breakpoint-up(lg) {
			margin-right: map-deep-get($token-spacer-inline-map, "md");
		}

	}


	/* modifiers */

	// linksIconBox -highlight
	&.-isHighlight {

		#{$self}__listItem {

			@include custom-prop-fallback("background-color", "comp-link-item-highlight-background-color");
			@include custom-prop-fallback("color","comp-link-item-text-color");

			&:hover,
			&:focus {
				@media (hover: hover) {
					@include custom-prop-fallback("background-color", "comp-link-item-highlight-hovered-background-color");
				}
			}

		}

		#{$self}__listIcon {

			@include custom-prop-fallback("background-color","comp-link-item-highlight-icon-background-color");
			@include custom-prop-fallback("color","sys-color-text-neutral-inverse");

		}

	}

	&.-headerRow {

		position: relative;

		#{$self}__header {

			flex-direction: row;

		}

		#{$self}__icon {

			margin-bottom: 0;

		}

	}

	/* random parent element */
	/* 
	*
	*   Syntax : .randomParentElt & {}
	*
	*/

	/* Pseudo Classes */

	&:hover {
		@media (hover: hover) {

		}
	}

	&:focus {
	}

	&:active {
	}

	&:focus,
	&:active {
	}

}