/* Clip SVG */
.clip-svg {
	width: 0;
	height: 0;
}

/* SVG Colors */
.svg-fill-color-light {
	fill: $color-light !important;
	svg {
		path, rect {
			fill: $color-light !important;
		}
	}
}

.svg-fill-color-hover-light {
	&:hover {
		fill: $color-light !important;
	}
	svg:hover {
		path, rect {
			fill: $color-light !important;
		}
	}
}

.svg-stroke-color-light {
	stroke: $color-light !important;
	svg {
		path, rect {
			stroke: $color-light !important;
		}
	}
}

.svg-stroke-color-hover-light {
	&:hover {
		stroke: $color-light !important;
	}
	svg:hover {
		path, rect {
			stroke: $color-light !important;
		}
	}
}

.svg-fill-color-dark {
	fill: $color-dark !important;
	svg {
		path, rect {
			fill: $color-dark !important;
		}
	}
}

.svg-fill-color-hover-dark {
	&:hover {
		fill: $color-dark !important;
	}
	svg:hover {
		path, rect {
			fill: $color-dark !important;
		}
	}
}

.svg-stroke-color-dark {
	stroke: $color-dark !important;
	svg {
		path, rect {
			stroke: $color-dark !important;
		}
	}
}

.svg-stroke-color-hover-dark {
	&:hover {
		stroke: $color-dark !important;
	}
	svg:hover {
		path, rect {
			stroke: $color-dark !important;
		}
	}
}

/* SVG Animations */
.svg-animation-effect-1-hover {
	&.svg-animation-effect-1-hover-dark {
		&:hover {
			svg {
				path, polygon, polyline, rect {
					stroke: $color-dark;
				}
			}
		}
	}
}

.svg-animation-effect-1-hover {
	&.svg-animation-effect-1-hover-light {
		&:hover {
			svg {
				path, polygon, polyline, rect {
					stroke: #FFF;
				}
			}
		}
	}
}