@use "variables" as *;
@use "utilities" as *;

// Buttons
%button-primary {
	background-color: $primary_color;
	color: $white;
	text-shadow: none;
	border: 0;
	letter-spacing: 0.2px;
	text-align: center;
	box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.20);
	font-weight: normal;
	line-height: 32px;
	height: 32px;
	padding: 0 16px 1px;

	&:hover {
		opacity: .8;
	}
}

%button-secondary {
	background-color: $secondary_color;
	color: $white !important;
	border: 0;
	line-height: 32px;
	height: 32px;
	padding: 0 16px 1px;

	&:hover {
		opacity: .7;
	}
}

%button-primary-rounded {
	font-size: 14px;
	line-height: 42px !important;
	height: 42px !important;
	width: 149px;
	border-radius: 21px;
	background-color: $primary_color;
	color: $white;
	border: 0;
	position: relative;
	overflow: hidden;
}

%button-outline-primary {
	font-family: $font_family;
	font-size: 13px;
	color: $primary_color;
	letter-spacing: 0.2px;
	text-align: center;
	background-color: $white;
	text-shadow: none;
	box-shadow: none;
	border: 1px solid $primary_color;
	line-height: 32px !important;
	height: 32px !important;
	padding: 0 16px !important;
	border-radius: 16.5px;

	&:hover {
		background-color: $primary_color !important;
		border: 1px solid $primary_color;
		color: $white;
		text-shadow: none !important;
	}

	&:disabled {
		background-color: $primary_color !important;
		opacity: .5;
		color: $white !important;
		font-weight: normal !important;
		text-shadow: none !important;
	}
}

// Dialog to restore backups
@mixin iloveimg-restore-dialog {
	border: none;
	border-radius: 20px;
	padding: 40px;
	animation: fade-out 0.2s ease-out;

	.iloveimg-title-dialog {
		text-align: center;
		font-size: 2.8em;
		color: $primary_color;
	}

	.iloveimg-content-dialog {
		font-size: 18px;
		font-weight: 500;
		color: $text_color;
	}

	.iloveimg-btn-groups {
		margin-top: 30px;
		display: flex;
		justify-content: center;
		gap: 30px;

		.button-primary {
			@extend %button-primary;
		}

		.button-secondary {
			@extend %button-secondary;
		}
	}

	&::backdrop {
		background-color: rgba(56, 56, 56, 0.75);
	}

	&[open] {
		animation: openDialog 300ms ease-in-out 0s 1 normal forwards;
	}
}