@use '../variables' as *;
%button {
	text-shadow: none;
	border: 0;
	letter-spacing: 0.2px;
	text-align: center;
	box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2);
	font-weight: normal;
	line-height: 32px;
	height: 32px;
	padding: 0 16px 1px;
	cursor: pointer;
	display: inline-block;

	&:hover {
		opacity: 0.8;
	}

	&:disabled:hover {
		opacity: 1;
	}
}

%button-primary {
	@extend %button;
	background-color: $primary_color;
	color: $white;
}

%button-inline-primary {
	display: inline-block;
	color: $primary_color;

	&:hover {
		opacity: 0.8;
	}
}

%button-secondary {
	@extend %button;
	background-color: $secondary_color;
	color: $white;

	&:hover {
		color: $white;
		background-color: $secondary_color;
	}
}

%button-inline-secondary {
	text-decoration: underline;

	&:hover {
		color: $secondary_color;
	}
}

%button-primary-rounded {
	@extend %button;
	font-size: 14px;
	line-height: 42px;
	height: 42px;
	width: 149px;
	border-radius: 21px;
	background-color: $primary_color;
	color: $white;
	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;
	height: 32px;
	padding: 0 16px;
	border-radius: 16.5px;

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

	&:disabled {
		opacity: 0.3;
		border: 1px solid $primary_color;
		font-weight: normal;
		text-shadow: none;

		&:hover {
			color: $primary_color;
			background-color: $white;
		}
	}
}

%button-upload {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 34px;
	letter-spacing: 0.2px;
	border: 0;
	border-radius: 5px;
	overflow: hidden;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
	margin-right: 10px;
	background-color: $light_color_300;
	padding: 0 10px 0 0;
	margin-bottom: 10px;
	cursor: pointer;

	> div {
		display: flex;
		align-items: center;
		height: 100%;
		padding: 0 10px;
		background-color: $primary_color;
	}

	&:hover {
		opacity: 0.8;
	}
}

@mixin all-buttons() {
	.ipdf-btn--primary {
		@extend %button-primary;
	}

	.ipdf-btn--inline-primary {
		@extend %button-inline-primary;
	}

	.ipdf-btn--outline-primary {
		@extend %button-outline-primary;
	}

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

	.ipdf-btn--inline-secondary {
		@extend %button-inline-secondary;
	}

	.ipdf-btn--upload-file {
		@extend %button-upload;
	}
}