$padding: 10px;

.cherry-popup-tabs-wrapper{
	&.cherry-component{
		padding: 5px;
	}
}

.option-page-footer{
	padding: $padding;
	display: flex;
	justify-content: flex-end;
	@media ( min-width: 783px ) {
		padding: $padding * 1.5;
	}
	@media ( min-width: 961px ) {
		padding: $padding * 3;
	}
	button{
		margin-left: 20px;
		position: relative;
		&:first-child{
			margin-left: 0;
		}
		.text{
			transition: opacity 0.7s ease;
		}
		.icon, .loader-wrapper{
			opacity: 0;
			transform: scale(0);
			transition: opacity 0.5s ease, transform 0.5s ease;
		}
		.icon {
			position: absolute;
			top: 50%;
			left: 50%;
			font-size: 40px;
			width: 40px;
			height: 40px;
			margin: -20px 0 0 -20px;
		}
		.loader-wrapper{
			position: absolute;
			top: 50%;
			left: 50%;
			width: 20px;
			height: 20px;
			margin: -13px 0 0 -13px;
		}
		.loader {
			width: 20px;
			height: 20px;
			border: 3px solid #ffffff;
			border-top: 3px solid #3498db;
			border-radius: 50%;
			display: block;
			animation: spin 0.7s linear infinite;
		}

		&[disabled], &.success{
			cursor: default;
			pointer-events: none;
			.text{
				opacity: 0;
			}
		}
		&[disabled]{
			.loader-wrapper{
				opacity: 1;
				transform: scale(1);
			}
		}
		&.success{
			.icon{
				opacity: 1;
				transform: scale(1);
				transition-delay: 0.1s;
			}
		}
		@keyframes spin {
			0% { transform: rotate(0deg); }
			100% { transform: rotate(360deg); }
		}
	}
}