@use "../utils" as *;

/*----------------------------
common button design
------------------------------*/

.cta-button {
	display: flex;
	align-items: center;
	gap: 16px;

	@media #{$lg} {
		gap: 10px;
	}

	@media #{$xs} {
		display: none;
	}
}

.bar-button {
	display: none;

	@media #{$md,$xs} {
		display: block;
	}

	@media #{$xs} {
		@include rtl {
			margin-right: 8px;
		}
	}


	button {
		color: var(--td-white);

		img {
			width: 20px;
		}
	}
}

.td-offcanvas-close-toggle {
	img {
		width: 30px;
	}
}


.td-btn {
	background: var(--td-theme-color);
	padding: 10px 20px;
	font-size: 13px;
	font-weight: 700;
	line-height: 150%;
	border-radius: 4px;
	display: inline-block;
	color: var(--td-theme-bg-color);
	position: relative;
	overflow: hidden;

	&-fullWidth {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

		&-2 {
			background-color: var(--td-theme-color-2);
			color: var(--td-white);
			border-radius: 100px;
		}
	}

	&-white {
		background-color: var(--td-white);

		&-round {
			border-radius: 100px;
		}

		img {
			margin-inline-end: 10px;
		}
	}

	&-green {
		background-color: var(--td-theme-color-2);
		color: var(--td-white);
		border-radius: 100px;
	}

	&-green2 {
		background-color: var(--td-theme-color-2);
		color: var(--td-white);
	}

	&-xl {
		padding: 15px 32px;
		font-size: 16px;

		@media #{$lg,$md} {
			padding: 12px 25px;
		}

		@media #{$xs} {
			padding: 10px 20px;
			font-size: 14px;
		}
	}

	&:hover {
		& .td-btn-y-1 {
			@include transform(translateY(-100%));
		}

		& .td-btn-y-2 {
			@include transform(translateY(0));
		}

		& i {
			inset-inline-end: -100%;
		}

		color: var(--td-theme-bg-color);
	}

	&:active {
		color: var(--td-white);
	}

	&-wrap {
		position: relative;
		overflow: hidden;
		display: block;

		& span {
			@include transition(.2s);
			display: block;

			& i {
				font-size: 15px;
				@include transform(rotate(-40deg));
				margin-inline-start: 5px;
			}
		}
	}

	&-y-2 {
		position: absolute;
		inset-inline-start: 0;
		top: 0;
		width: 100%;
		@include transform(translateY(100%));
	}

	&-secondary {
		background-color: var(--td-theme-color-2);
		color: var(--td-white);
		border-radius: 100px;

		&:hover{
			color: var(--td-white);
		}

	}

	&-sec {
		background-color: var(--td-theme-bg-color);
		color: var(--td-white);

		&:hover {
			color: var(--td-white);
		}

		&-secondary {
			background-color: rgba(255, 255, 255, 0.06);
			border-radius: 100px;

			&-gray {
				background-color: rgb(44, 44, 44);
			}
		}
	}

	&-round {
		height: 36px;
		width: 36px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 48px;
		background-color: rgba(255, 255, 255, 0.10);
		transition: background-color 0.3s ease-in-out;

		&:hover {
			background-color: var(--td-theme-bg-color);
		}
	}

	&-dropdown {
		border-radius: 4px;
		background: #F0F0F0;
		padding: 10px 24px;
		color: var(--td-theme-bg-color);
		font-size: 16px;
		font-weight: 600;
		text-transform: capitalize;
	}
}


.blinking-button {
	position: relative;
	width: 110px;
	height: 110px;
	display: flex;
	justify-content: center;
	align-items: center;

	.circle {
		position: absolute;
		border-radius: 50%;
	}

	.outer-circle {
		width: 110px;
		height: 110px;
		background-color: rgba(0, 0, 0, 0.05);
		animation: blink-outer 2s infinite;
	}

	.middle-circle {
		width: 90px;
		height: 90px;
		background-color: rgba(0, 0, 0, 0.1);
		animation: blink-middle 1.5s infinite;
	}

	.inner-circle {
		width: 70px;
		height: 70px;
		background-color: #333;
		display: flex;
		justify-content: center;
		align-items: center;

		.check-icon {
			width: 30px;
			height: 30px;
		}
	}

	@keyframes blink-outer {

		0%,
		100% {
			opacity: 1;
		}

		50% {
			opacity: 0.5;
		}
	}

	@keyframes blink-middle {

		0%,
		100% {
			opacity: 1;
		}

		50% {
			opacity: 0.3;
		}
	}
}


.custom-select-dropdown {
	button {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		border: 1px solid #E1E1E1;
		padding: 10px;
		border-radius: 5px;
	}

	.custom-dropdown-menu {
		width: 100%;
		padding: 10px;
		max-height: 250px;
		overflow-y: auto;

		&::-webkit-scrollbar {
			width: 5px;
		}

		&::-webkit-scrollbar-track {
			background: #d6d6d6;
		}

		&::-webkit-scrollbar-thumb {
			background-image: linear-gradient(125deg, rgba(#222, 0.8) 0%, rgba(#222, 0.8) 100%);
			border-radius: 10px;
		}

		&::-webkit-scrollbar-thumb:hover {
			background: #555;
		}

		li {
			cursor: pointer;
			margin-bottom: 15px;

			&:last-child {
				margin-bottom: 0;
			}
		}
	}
}

.custom-select-dropdown-full {
	display: flex;
	flex: 1;
	justify-content: space-between;
	align-items: center;

	transition: all 0.3s ease-in-out;

	&-option {
		transition: all 0.3s ease-in-out;
		padding: 0 5px;
		border-radius: 5px;

		&:hover {
			background-color: #F6F6F6;
		}
	}

	span {
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.custom-label {
		color: #333;
		font-size: 14px;
		flex-shrink: 0;
		margin-right: 10px;
	}

	.custom-select-full {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		text-align: start;


		&-left {
			display: flex;
			align-items: center;
			gap: 10px;

			.card-img {
				height: 50px;
				width: 50px;

				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					border-radius: 5px;
				}
			}

			.space-name {
				font-size: 16px;
				color: #333;
				margin-bottom: 3px;
			}

			.space-duration {
				background-color: var(--td-theme-color);
				padding: 0px 15px;
				font-size: 12px;
				border-radius: 50px;
				display: inline-block;
				justify-content: center;
				align-items: center;
				font-weight: 500;
				color: var(--td-theme-bg-color);
			}
		}

		.space-price {
			font-weight: 600;
			font-size: 14px;
		}
	}
}

.action-btns {
	display: flex;
	align-items: center;
	justify-content: end;
	gap: 5px;
}

.print-btn {
	width: 36px;
	height: 36px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #F6F6F6;
	border-radius: 4px;
	transition: all 0.3s ease-in-out;

	i {
		font-size: 12px;
		color: var(--td-theme-bg-color);
		transition: all 0.3s ease-in-out;
	}

	&:hover {
		background-color: var(--td-theme-bg-color);
		color: var(--td-white);

		i {
			color: var(--td-white);
		}
	}
}

.pay-now-btn {
	padding: 8px 16px;
	border-radius: 4px;
	color: var(--td-theme-bg-color);
	font-size: 14px;
	font-weight: 700;
	line-height: 18px;
	background-color: var(--td-theme-color);
	transition: all 0.3s ease-in-out;
	text-wrap: nowrap;

	&:hover {
		color: var(--td-theme-color);
		background-color: var(--td-theme-bg-color);
	}
}