/*********************************
/*  Button Start
*********************************/
.sg-btn {
	font-family: var(--font-default);
	font-weight: var(--font-regular);
	font-size: 16px;
	line-height: 18px;
	color: var(--color-heading);
	padding: 10px 20px;
	border: 1px solid var(--color-border);
	display: inline-block;
	text-transform: capitalize;
	text-align: center;
	border-radius: var(--radius);
	transition: var(--transition);

	&-primary {
		background: var(--color-primary);
		border: 1px solid var(--color-primary);
		color: var(--color-white);

		&:hover {
			background: var(--color-heading);
			border: 1px solid var(--color-heading);
			color: var(--color-white);
		}
	}
	&-outline {
		background: transparent;
		border: 1px solid var(--color-border);
		color: var(--color-heading2);

		&:hover {
			background: var(--color-heading);
			border: 1px solid var(--color-heading);
			color: var(--color-white);
		}
	}
	&-dark {
		background: var(--color-heading);
		border: 1px solid var(--color-heading);
		color: var(--color-white);

		&:hover {
			background: var(--color-primary);
			border: 1px solid var(--color-primary);
			color: var(--color-white);
		}
	}
	&-white {
		background: var(--color-white);
		border: 1px solid var(--color-white);
		color: var(--color-content);

		&:hover {
			background: var(--color-heading);
			border: 1px solid var(--color-heading);
			color: var(--color-white);
		}
	}
	&-green {
		background: var(--color-green);
		border: 1px solid var(--color-green);
		color: var(--color-white);

		&:hover {
			background: var(--color-heading);
			border: 1px solid var(--color-heading);
			color: var(--color-white);
		}
	}
	&-danger {
		background: var(--color-danger);
		border: 1px solid var(--color-danger);
		color: var(--color-white);

		&:hover {
			background: var(--color-heading);
			border: 1px solid var(--color-heading);
			color: var(--color-white);
		}
	}
}

.solid__btn {
	font-family: var(--font-default);
	font-weight: var(--font-regular);
	font-size: 16px;
	line-height: 24px;
	color: var(--color-content);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-transform: capitalize;
	transition: var(--transition);

	&:hover {
		color: var(--color-primary);
	}
}

/*********************************
/*  Button End
*********************************/
