//
// Icon Box
//

@mixin icon-position($device) {
	&.elementor#{$device}-position- {

		&right {

			.elementor-icon-box-wrapper {
				text-align: end;
				flex-direction: getValueByDirection(row-reverse, row);
				gap: var(--icon-box-icon-margin, 15px);
			}
		}

		&left {

			.elementor-icon-box-wrapper {
				text-align: start;
				flex-direction: getValueByDirection(row, row-reverse);
				gap: var(--icon-box-icon-margin, 15px);
			}
		}

		&top {

			.elementor-icon-box-wrapper {
				text-align: center;
				flex-direction: column;
				gap: var(--icon-box-icon-margin, 15px);
				align-items: unset !important; // Specificity override to fix mobile icon alignment issue.
			}
		}

		&bottom {

			.elementor-icon-box-wrapper {
				text-align: center;
				flex-direction: column-reverse;
				gap: var(--icon-box-icon-margin, 15px);
				align-items: unset !important; // Specificity override to fix mobile icon alignment issue.
			}
		}
	}
}

.elementor-widget-icon-box {

	.elementor-icon-box-wrapper {
		display: flex;
		text-align: center;
		flex-direction: column;
		gap: var(--icon-box-icon-margin, 15px);
	}

	.elementor-icon-box-icon {
		display: inline-block;
		flex: 0 0 auto; // Hack for Safari
		line-height: 0;
	}

	.elementor-icon-box-content {
		width: 100%;
		flex-grow: 1;
	}

	.elementor-icon-box-title {

		a {
			color: inherit;
		}
	}

	.elementor-icon-box-description {
		margin: 0;
	}

	@include icon-position('');

	@media (min-width: $screen-widescreen-min) {
		@include icon-position(-widescreen);
	}

	@media (max-width: $screen-laptop-max) {
		@include icon-position(-laptop);
	}

	@media (max-width: $screen-tablet-extra-max) {
		@include icon-position(-tablet_extra);
	}

	@media (max-width: $screen-tablet-max) {
		@include icon-position(-tablet);
	}

	@media (max-width: $screen-mobile-extra-max) {
		@include icon-position(-mobile_extra);
	}

	@media (max-width: $screen-mobile-max ) {
		@include icon-position(-mobile);

		&.elementor-position- {

			&left,
			&right {

				.elementor-icon-box-icon {
					flex-direction: column;
				}
			}
		}
	}
}
