/*********************************
/*  Button Start
*********************************/

.btn {
	font-family:var(--font-roboto);
	font-size: 16px;
	line-height: 24px;
	font-weight: var(--font-regular);
	padding: 8px 16px;
	border-radius: 8px;
	border: none;
	outline: none;
	display: inline-block;
	text-transform: capitalize;
	transition: var(--transition);

	svg,
	img,
	i {
		font-size: 18px;
		margin-right: 5px;
		display: inline-block;
	}

	&:focus {
		box-shadow: none;
		outline: none;
	}

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

		&.active,
		&:focus,
		&:hover {
			// border-color: var(--color-primary) ;
			// background: rgba(var(--color-white-rgb), 0.1) ;
			// color: var(--color-white) ;
			background: var(--color-white);
			border-color: var(--color-white);
			color: var(--color-black);
			box-shadow: none ;
		}
	}
	&-outline {
		background-color: transparent;
		color: var(--color-primary);
		border: 1px solid rgba(var(--color-white-rgb), 0.2);

		&:focus,
		&:hover {
			background: var(--color-primary);
			color: var(--color-white);
			box-shadow: none;
			border-color: var(--color-primary);
		}
	}
	&-white {
		background-color: var(--color-white);
		color: var(--color-black);
		border: 1px solid var(--color-white);

		&:hover {
			background: var(--color-primary);
			color: var(--color-white);
			box-shadow: none;
			border-color: var(--color-primary);
		}
	}
	&-gray {
		background: #F8F8F8;
		border: 1px solid #F8F8F8;
		color: #666666;

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

		&:hover {
			background: var(--color-primary) !important;
			color: var(--color-white) !important;
			box-shadow: none;
			border-color: var(--color-primary) !important;
		}
	}
}

.solid__btn {
	font-family:var(--font-roboto);
	font-size: 16px;
	line-height: 24px;
	font-weight: var(--font-regular);
	color: var(--color-white);
	transition: var(--transition);
	display: inline-flex;
	align-items: center;
	gap: 10px;

	i {
		font-size: 18px;
	}

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