@use "mixins/mixins-master" as *;
@use "mixins/flex" as *;
@use "variables" as *;
.thim-sc-button {
	&.left {
		text-align: left;
	}

	&.center {
		text-align: center;
	}

	&.right {
		text-align: right;
	}

	.btn {
		@include rounded(50px);
		text-transform: uppercase;
		font-weight: 500;
		cursor: pointer;
		&::after {
			content: "\f125";
			font-family: ionicons;
			font-size: 14px;
			line-height: 1;
			margin-left: 13px;
		}
		&.btn-xs {
			font-size: 16px;
			// letter-spacing: 0.3px;
			text-transform: uppercase;
			padding: 0 25px;
			line-height: 30px;
			height: 30px;
		}

		&.btn-sm {
			font-size: 16px;
			// letter-spacing: 0.3px;
			text-transform: uppercase;
			padding: 0 30px;
			line-height: 35px;
			height: 35px;
		}

		&.btn-md {
			font-size: 16px;
			text-transform: uppercase;
			padding: 0 32px;
			line-height: 48px;
			height: 48px;
		}

		&.btn-lg {
			font-size: 16px;
			font-weight: 500;
			height: 48px;
			line-height: 48px;
			padding: 0 45px;
		}
	}

	&.show-separator {
		position: relative;

		.btn {
			position: relative;
			z-index: 10;
		}

		&:before {
			content: "";
			left: 0;
			right: 0;
			top: 50%;
			border-top: 1px solid $border-color;
			position: absolute;
			z-index: 1;
		}
	}

	.btn-secondary {
		background-color: #fff;
		border-color: #fff;
		font-weight: 500;

		&:hover {
			color: #fff;
		}
	}
	&.button-no-arrow {
		.btn-secondary.btn::after {
			display: none;
		}
	}
	.btn-basic {
		background-color: #fff;
		font-weight: normal;

		&:hover {
			color: #fff;
		}
	}

	.btn-style_kit {
		padding: 0 42px !important;
		height: 48px !important;
		@include rounded(24px);
		@include background-vertical(#60d3c6, #47d899);
		text-align: center;
		font-weight: 500;
		line-height: 48px !important;
		text-transform: uppercase;
		font-size: 16px !important;
		color: #fff;
		position: relative;
		z-index: 1;
		border: 0;

		&:before {
			display: none;
		}

		&:hover,
		&:focus {
			color: #333;
			cursor: pointer;

			&:before {
				display: block;
				content: "";
				position: absolute;
				left: 1px;
				top: 1px;
				@include albertcalc(width, 2px);
				@include albertcalc(height, 2px);
				background: #fff;
				z-index: -1;
				@include border-radius(24px, 24px, 24px, 24px);
			}
		}
	}
	&.hide-arrow {
		.btn::after {
			display: none;
		}
	}
	&.black {
		.btn {
			color: $thim_font_title_color;
		}
	}
}