@use '../utilities/colors' as *;
@use '../base/merlin' as *;

button {
	border: none;
	-webkit-appearance: none;
	-webkit-border-radius: none;
}

button,
.button {
	padding: 10px 20px;
	cursor: pointer;
	border-radius: 35px;
	display: inline-block;
	@extend .font-11;
	@extend .semi-bold;
	@extend .uppercase;
	@extend .transition;

	&-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: .5rem;

		i {
			@extend .transition;
		}
	}

	&-solid {
		background-color: var(--button-solid-color);
		color: #FFF;

		&:hover {
			background-color: var(--primary-color);
		}
	}

	&-secondary {
		background-color: var(--primary-color);
		color: #FFF;

		&:hover {
			background-color: var(--button-solid-color);
		}

		&[disabled="disabled"] {
			background-color: $text-color-light;
			cursor: not-allowed;
			opacity: .5;
		}
	}

	&-white {
		background-color: #FFF;
		color: var(--primary-color);

		&:hover {
			background-color: var(--primary-color);
			color: #FFF;
		}
	}

	&-outline {
		border: 1px solid var(--primary-color);
		color: var(--primary-color);

		&:hover {
			background-color: #fff;
			border: 1px solid #FFF;
			color: var(--secondary-color);
		}
	}

	&-file {
		position: relative;

		&:after {
			content: "\e967";
			font-family: "icomoon";
			@extend .font-14;
		}
	}

	&-download {
		position: relative;

		&:after {
			content: "\e959";
			font-family: "icomoon";
			@extend .font-14;
		}
	}

	&-clean {
		background-color: transparent;
		color: rgba($text-color-light, .8);

		&:hover {
			background-color: transparent;
			color: var(--primary-color);
		}
	}

	&-remove {
		background-color: $yellow;
		color: #FFF;

		&:hover {
			opacity: .6;
		}
	}

	&-none {
		background-color: transparent;
		border: none;
		padding: 0;
		color: #FFF;

		&:hover {
			background-color: transparent;
			color: var(--primary-color);
		}
	}
}