/* Icons */
.ns_icon {
	position: relative;
	display: inline-block;
	vertical-align: middle;

	background-position: 0px 0px;
	background-size: cover;
}

.ns_icon > span {
	position: absolute;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(0px 0px 99.9% 99.9%);
	clip-path: inset(0px 0px 99.9% 99.9%);
	overflow: hidden;
	height: 1px;
	width: 1px;
	padding: 0;
	border: 0;
	top: 50%;
}

.ns_icon > svg {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	width: 100%;
	height: 100%;
}

.ns_icon > svg .ns_icon-stroke,
.ns_icon > svg .ns_icon-fill{
	-webkit-transition: all var(--hipnos-transition-ease);
	-o-transition: all var(--hipnos-transition-ease);
	transition: all var(--hipnos-transition-ease);
}

.ns_icon[data-theme="dark"] > svg .ns_icon-stroke {
	stroke: var(--hipnos-color-secondary-1);
}

.ns_icon[data-theme="dark"] > svg .ns_icon-fill {
	fill: var(--hipnos-color-secondary-1);
}

.ns_icon[data-theme="light"] > svg .ns_icon-stroke {
	stroke: var(--hipnos-color-neutral-5);
}

.ns_icon[data-theme="light"] > svg .ns_icon-fill {
	fill: var(--hipnos-color-neutral-5);
}

.ns_icon[data-theme="primary"] > svg .ns_icon-stroke {
	stroke: var(--hipnos-color-primary-1);
}

.ns_icon[data-theme="primary"] > svg .ns_icon-fill {
	fill: var(--hipnos-color-primary-1);
}

.ns_icon[data-size="small"] {
	width: 16px;
	height: 16px;
}

.ns_icon[data-size="normal"] {
	width: 24px;
	height: 24px;
}

.ns_icon[data-size="big"] {
	width: 42px;
	height: 42px;
}