@import "/style/variables.css";

.button {
	padding: 14px 20px;
	border-radius: 14px;
	font-size: 15px;
	font-weight: 500;
	margin: auto;
	text-align: center;
	border: none;
	text-decoration: none;
	cursor: pointer;
}

.button_home {
	border-radius: 14px;
	font-size: 15px;
	font-weight: 500;
	margin: auto;
	text-align: center;
	border: none;
	text-decoration: none;
	cursor: pointer;
	padding: 13px 24px;
	align-items: center;
	width: 190px;
	height: 23px;
}

.button_bordeaux {
	display: flex;
	background-color: hsla(317, 51%, 41%, 1);
	color: white;
}

.button_bordeaux > svg {
	height: 22px;
}

.button_blue {
	background-color: var(--main-color-blue);
	color: white;
}

.button_blue > svg {
	height: 12px;
}

.button_container {
	display: flex;
	margin-top: 15px;
	margin-left: 28px;
}

.button_container_links {
	display: flex;
	gap: 10px;
	align-items: center;
}

.button:disabled,
.button_disabled {
	opacity: 0.7;
	cursor: default;
}

.button_white {
	background-color: white;
	color: hsl(207, 13.7%, 44.5%);
}

.button_white:hover:not(:disabled):not(.button_disabled) {
	box-shadow: 0 2px 7px 0 hsla(0, 0%, 0%, 0.1), 0 0 14px 0 hsla(0, 0%, 0%, 0.14);
}

.button_white-bordered {
	border: 1px solid var(--main-color-blue);
	color: var(--main-color-blue);
	background-color: transparent;
}

.button_blue-bordered {
	border: 1px solid hsl(0, 0%, 89%);
	color: white;
	background-color: transparent;
}

.button_white-bordered:hover:not(:disabled):not(.button_disabled) {
	border: 1px solid white;
	box-shadow: 0 2px 7px 0 hsla(0, 0%, 0%, 0.1), 0 0 14px 0 hsla(0, 0%, 0%, 0.14);
}

.button_home > svg {
	fill: #fff;
	margin-left: 10px;
}

.button_blue:hover:not(:disabled):not(.button_disabled) {
	background-color: hsl(226, 77%, 54%);
	box-shadow: 0 2px 7px 0 hsla(0, 0%, 0%, 0.1), 0 0 14px 0 hsla(0, 0%, 0%, 0.14);
}

.button_blue:hover:not(:disabled):not(.button_disabled) {
	background-color: hsl(226, 77%, 54%);
	box-shadow: 0 2px 7px 0 hsla(0, 0%, 0%, 0.1), 0 0 14px 0 hsla(0, 0%, 0%, 0.14);
}

.button_transparent {
	background-color: transparent;
	color: var(--main-text-color-2);
}

.button_transparent:hover:not(:disabled):not(.button_disabled) {
	text-decoration: underline;
}

.button_orange {
	background-color: var(--main-color-orange);
	color: white;
}

.button_orange:hover:not(:disabled):not(.button_disabled) {
	opacity: 0.8;
}

@media (max-width: 1290px) {
	.button_home {
		width: 240px;
	}

	.button_container_links {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.button_container {
		margin-left: 0;
	}
}