/* Buttons */
.ns_button,
.ns_arengu-form .af-button button,
.single_add_to_cart_button{
	position: relative;
	display: inline-block;
	width: 100%;
	padding: 12px;
	padding-left: 24px;
	padding-right: 24px;
	margin: 0px;

	font-weight: var(--hipnos-font-weight-bold);
	font-size: 16px;
	line-height: 20px;
	text-align: center;
	white-space: nowrap;

	border-width: 2px;
	border-style: solid;
	border-radius: var(--hipnos-border-radius);

	background: var(--hipnos-color-primary-1);
	border-color: var(--hipnos-color-primary-1);
	color: var(--hipnos-color-neutral-5);

	opacity: 1 !important;

	cursor: pointer;
}

.ns_button-flex{
	display: flex;
	flex-direction: row;
	align-content: center;
	align-items: center;
	justify-content: center;
}

.ns_button-flex .ns_icon{
	margin-right: 4px;
}

.ns_button.ns_button-auto{
	width: auto;
}

.ns_button img{
	width: 24px;
	height: 24px;
}

.ns_button .ns_button-inner img,
.ns_button .ns_button-inner .ns_icon{
	margin-right: 2px;
}

.ns_button-inner{
	display: flex;
	align-items: center;
	justify-content: center;
	align-content: center;
}

.ns_button,
.ns_arengu-form .af-button button,
.ns_button[data-type="primary"],
.single_add_to_cart_button {
	background: var(--hipnos-color-primary-1);
	border-color: var(--hipnos-color-primary-1);
	color: var(--hipnos-color-neutral-5);
}

.ns_button:hover,
.ns_arengu-form .af-button button:hover,
.ns_button[data-type="primary"]:hover,
.single_add_to_cart_button:hover {
	background: var(--hipnos-color-primary-2);
	border-color: var(--hipnos-color-primary-2);
	color: var(--hipnos-color-neutral-5);
}

.ns_button[data-type="secondary"] {
	background: var(--hipnos-color-secondary-1);
	border-color: var(--hipnos-color-secondary-1);
	color: var(--hipnos-color-neutral-5);
}

.ns_button[data-type="secondary"]:hover {
	background: var(--hipnos-color-secondary-2);
	border-color: var(--hipnos-color-secondary-2);
	color: var(--hipnos-color-neutral-5);
}

.ns_button[data-type="light"] {
	background: var(--hipnos-color-neutral-5);
	border-color: var(--hipnos-color-neutral-5);
	color: var(--hipnos-color-neutral-5);
}

.ns_button[data-type="light"]:hover {
	background: var(--hipnos-color-primary-1);
	border-color: var(--hipnos-color-primary-1);
	color: var(--hipnos-color-neutral-5);
}

.ns_button.border[data-type="primary"] {
	background: transparent;
	border-color: var(--hipnos-color-primary-1);
	color: var(--hipnos-color-primary-1);
}

.ns_button.border[data-type="primary"]:hover {
	background: var(--hipnos-color-primary-1);;
	border-color: var(--hipnos-color-primary-1);
	color: var(--hipnos-color-neutral-5);
}

.ns_button.border[data-type="secondary"]{
	background: transparent;
	border-color: var(--hipnos-color-secondary-1);
	color: var(--hipnos-color-secondary-1);
}

.ns_button.border[data-type="secondary"]:hover{
	background: var(--hipnos-color-secondary-1);
	border-color: var(--hipnos-color-secondary-1);
	color: var(--hipnos-color-neutral-5);
}

.ns_button.border[data-type="light"] {
	background: transparent;
	border-color: var(--hipnos-color-neutral-5);
	color: var(--hipnos-color-neutral-5);
}

.ns_button.border[data-type="light"]:hover {
	background: var(--hipnos-color-neutral-5);
	border-color: var(--hipnos-color-neutral-5);
	color: var(--hipnos-color-secondary-1);
}

.ns_button[data-type="secondary"]:hover .ns_icon[data-theme="dark"] > svg .ns_icon-stroke {
	stroke: var(--hipnos-color-neutral-5);
}

.ns_button[data-type="secondary"]:hover .ns_icon[data-theme="dark"] > svg .ns_icon-fill {
	fill: var(--hipnos-color-neutral-5);
}

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

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

.ns_button[data-type="primary"].disabled,
.ns_button[data-type="secondary"].disabled,
.ns_button[data-type="primary"]:disabled,
.ns_button[data-type="secondary"]:disabled{
	background: var(--hipnos-color-secondary-3);
	border-color: var(--hipnos-color-secondary-3);
	color: var(--hipnos-color-secondary-2);
	cursor: not-allowed;
}

.ns_button.border[data-type="primary"].disabled,
.ns_button.border[data-type="secondary"].disabled,
.ns_button.border[data-type="primary"]:disabled,
.ns_button.border[data-type="secondary"]:disabled{
	background: transparent;
	border-color: var(--hipnos-color-secondary-3);
	color: var(--hipnos-color-secondary-2);
	cursor: not-allowed;
}

.ns_button[data-size="small"] {
	font-size: 12px;
	line-height: 20px;
	padding: 6px;
	padding-left: 16px;
	padding-right: 16px;
}

.ns_button[data-size="normal"] {}

.ns_button[data-size="big"] {}

/* Spinner */
.ns_button-spinner {
	display: none;
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	margin-left: -10px;
	border-radius: 50%;
	border: 2px solid var(--hipnos-color-neutral-5);
	border-top-color: rgba(255, 255, 255, 0);
	animation: ns_button-spinner .6s linear infinite;
	z-index: 10;
}

.ns_button-with-spinner{
	position: relative;
}

.ns_button-with-spinner.process .ns_button{
	font-size: 0px;
}

.ns_button-with-spinner.process .ns_button-spinner{
	display: block;
}

.af-spinner {
	border-color: var(--hipnos-color-neutral-5) !important;
}

@keyframes ns_button-spinner {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(359deg);
	}
}