finlabsindia/wp-content/themes/vamtam-consulting/vamtam/assets/css/side-buttons.less

/* Scroll to Top */
#scroll-to-top {
	position: fixed;
	z-index: 200;
	opacity: 0;
	bottom: 10px;
	right: 20px;
	width: 46px;
	height: 46px;
	line-height: 44px;
	font-size: 20px;
	font-family: theme !important;
	margin-left: 0px;
	background: var( --vamtam-accent-color-1-transparent );
	text-shadow: none;
	color: var( --vamtam-accent-color-3 );
	border-radius: var( --vamtam-border-radius-oval );
	transition: opacity .3s ease-out, background .3s ease-out, border-color .3s ease-out, transform .3s ease-out;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: scale3d( 0, 0, 0 );
	text-align: center;
	cursor: pointer;

	&:hover {
		background: var( --vamtam-accent-color-1 );
		color: var( --vamtam-accent-color-1-hc );
	}
}

.post-siblings a {
	@height: 70px;

	position: fixed;
	top: 50%;
	margin-top: -@height/2;
	display: flex;
	overflow: hidden;
	border-radius: var( --vamtam-border-radius-oval );
	z-index: 10;
    border: none;

	.icon {
		width: 50px;
		padding: 0px 10px;
		border-radius: var( --vamtam-border-radius-oval );
		height: @height;
		background-color: var( --vamtam-accent-color-5 );
		text-align: center;
		color: var( --vamtam-h1-color );
		font-size: 26px;
		line-height: 72px;
		transition-property: background-color, border-color, color;
		transition-duration: .15s;
		transition-timing-function: ease-out;
		border: solid 1px var( --vamtam-accent-color-7 );
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		z-index: 500;

		will-change: background, border-color, color;
	}

	&[rel="prev"]:hover,
	&[rel="next"]:hover {
		-webkit-clip-path: none;
		clip-path: none;

		.icon {
			background-color: var( --vamtam-accent-color-1 );
			border-color: var( --vamtam-body-link-hover );
			color: var( --vamtam-accent-color-5 );
		}
	}

	&[rel="prev"] {
		left: 20px;

		-webkit-clip-path: circle( 36px at 36px 36px );
		clip-path: circle( 36px at 36px 36px );

		.sibling-title {
			border-radius: 0 var( --vamtam-border-radius-oval ) var( --vamtam-border-radius-oval ) 0;
			padding-left: 60px;
			padding-right: 30px;
			transform: translateX( -100% );
			margin-left: -40px;
		}

		&:hover .sibling-title {
			transform: translateX( 0 );
		}
	}

	&[rel="next"] {
		right: 20px;

		-webkit-clip-path: circle( 36px at top 36px right 36px );
		clip-path: circle( 36px at top 36px right 36px );

		.sibling-title {
			border-radius: var( --vamtam-border-radius-oval ) 0 0 var( --vamtam-border-radius-oval );
			padding-right: 60px;
		    padding-left: 30px;
			transform: translateX( 100% );
			margin-right: -40px;
		}

		&:hover .sibling-title {
			transform: translateX( 0 );
		}
	}

	.sibling-title {
		.vamtam-font( primary-font- );
		display: flex;
		align-items: center;
		background: var( --vamtam-accent-color-5 );
		color: var( --vamtam-h1-color );
		border: solid 1px var( --vamtam-accent-color-7 );
		padding: 10px 20px;
		will-change: transform;

		transition-property: transform;
		transition-duration: .15s;
		transition-timing-function: ease-out;
	}
}

.mfp-figure:after {
	display: none;
	.mfp-close {
		display: none;
	}
}
button.mfp-close {
	opacity: 1;
	background: transparent;
	font-size: 1em;
    width: auto;
    height: auto;

	&:after {
		content: icon( vamtam-theme-close-sample);
		font-family: "theme";
		display: block;
		transition: all .3s ease;
		font-size: 1.8em;
		vertical-align: middle;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		display: block;
		width: 50px;
		height: 50px;
		line-height: 50px;
		padding: 10px;
		position: absolute;
		top: 20px;
		right: 20px;
		border-radius: var( --vamtam-border-radius-oval );
		color: var( --vamtam-accent-color-6 );
		background: var( --vamtam-overlay-color );

	}

	&:hover:after {
		color: var( --vamtam-accent-color-1-hc );
		background: var( --vamtam-accent-color-1 );
	}
}

.jp-carousel-next-button,
.jp-carousel-previous-button,
.jp-carousel-close-hint {
	span {
		opacity: 1 !important;
		background: none !important;
		text-indent: -1000px;
		width: 70px;
		height: auto;

		&:after {
			content: icon( vamtam-theme-arrow-right-sample);
			font-family: theme;
			color: var( --vamtam-accent-color-1-hc );
			background: var( --vamtam-accent-color-6 );
			display: block;
			width: 50px;
			height: 50px;
			padding: 10px;
			font-size: 1.7em;
			line-height: 50px;
			vertical-align: middle;
			top: 43%;
			position: absolute;
			text-indent: initial;
			text-align: center;
			border-radius: var( --vamtam-border-radius-oval );
			transition: all .3s ease;
		}

		&:hover:after {
			color: var( --vamtam-accent-color-1-hc );
			background: var( --vamtam-accent-color-1 );
		}
	}
}

.jp-carousel-light span {
	&:after {
			color: var( --vamtam-accent-color-6 );
			background: var( --vamtam-overlay-color );
		}

		&:hover:after {
			color: var( --vamtam-accent-color-1-hc );
			background: var( --vamtam-accent-color-1 );
		}

}
.jp-carousel-next-button {
	right: 35px !important;
}

.jp-carousel-previous-button {
	left: 45px !important;
}

.jp-carousel-previous-button span:after {
	content: icon( vamtam-theme-arrow-left-sample);
}

.jp-carousel-wrap .jp-carousel-close-hint {
	text-align: center;
	width: 70px;
	height: 70px;
	padding: 0px;
	right: 45px;
	overflow: hidden;
	margin-top: 20px;

	color: rgba(0, 0, 0, 0) !important;

	span {
		margin: 0px;

		&:after {
			font-size: 1em;
			top: 0px;
			left: 0px;
			content: icon( vamtam-theme-close-sample);
		}
	}
}