@import "./media-queries";

@mixin button {
	border: 2px solid var(--button-border-color);
	font-family: $font-family;
	font-size: 16px;
	border-radius: 7px;
	padding: $button-padding;
	margin-right: 0.5em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: inherit;
	transition: all ease 300ms;
	background-color: $button-background-color;
	cursor: pointer;
	white-space: nowrap;
	max-width: 100%;
	text-overflow: ellipsis;

	&:last-child {
		margin-right: 0;
	}

	&.disabled {
		opacity: .7;
		cursor: default;

		--shadow-width: 0;
		--shadow-distance: 0;

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

	&:not(.disabled) {
		&:hover {
			background-color: var(--button-background-color--hover);
			color: var(--button-hover-color);
			box-shadow: $button-shadow;
			border-color: var(--button-hover-border-color);
			
			--shadow-width: 6px;
			--shadow-distance: 2px;
		}
	}
}

.btn {
	@include button;

	&--danger {
		--icon-color: var(--color--error);
		
		&:not(.disabled):hover {
			background: var(--color--error);

			--icon-color: currentcolor;
		}
	}

	svg {
		margin-right: 0.5em;
	}
	
	&--icon-only svg {
		margin: 0;
	}

	span + svg {
		margin-left: .5em;
	}

	&--options {
		position: absolute;
		right: 0;

		svg:not(:first-of-type) {
			margin-left: .5rem;
		}
	}

	&--reset {
		@include medium-screen {
			max-width: 59%;
		}
	}

	&__label {
		max-width: 100%;
		text-overflow: ellipsis;
	}
}
