.button {
	align-content: center;
	border: none;
	border-radius: var(--border-radius_m);
	box-sizing: border-box;
	cursor: pointer;
	display: inline-block;
	font-weight: 600;
	font-size: .875rem;
	font-family: inherit;
	line-height: 1.25rem;
	padding: .625rem 1.125rem;
	text-align: center;
	text-decoration: none;
	transition: all var(--transition), outline 0s;
	-webkit-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	white-space: nowrap;
}
/*.button:hover,
.button:active {
	filter: drop-shadow(var(--box-shadow-s));
}*/
.button:focus,
.button:focus-visible {
	outline-width: 2px;
	outline-style: solid;
}
.button:focus:not(:focus-visible) {
	outline-width: 0;
}

.button.button_s {
	font-size: .75rem;
	padding: .5rem 1rem;
}
.button.button_m {
	font-size: .875rem;
	padding: .625rem 1.125rem;
}
.button.button_l {
	font-size: 1rem;
	padding: .875rem 1.375rem;
}
.button.button_xl {
	font-weight: 500;
	font-size: 1rem;
	line-height: 1.375rem;
	padding: .875rem 1.875rem;
}
/*.button.button_xl:hover,
.button.button_xl:active {
	filter: drop-shadow(var(--box-shadow-xl));
}*/

.button--fw {
	display: block;
	width: 100%;
}
@media (max-width: 409px) {
	.button--fw_in-mobile {
		margin-bottom: 10px;
		width: 100%;
	}
}

.button.button_thin {
	font-weight: 500;
}
.button.button_ico {
	display: flex;
}
.button.button_ico--center .button__ico {
	margin-bottom: .25rem;
}
.button.button_ico--left .button__ico {
	margin-right: .5rem;
}

.button--light-border {
	border: 1px solid rgba(255, 255, 255, .4);
	color: #FFF;
}

.button--blue {
	background: var(--gradient-blue);
	color: var(--color-white);
}
.button--blue:hover {
	background: var(--gradient-blue-dark);
}
.button--blue:active {
	background: var(--color-blue-dark);
}
.button--blue:focus,
.button--blue:focus-visible {
	outline-color: var(--color-blue-dark);
}

.button--purple {
	background: var(--gradient-purple);
	color: var(--color-white);
}
.button--purple:hover {
	background: var(--gradient-purple-dark);
}
.button--purple:active{
	background: var(--color-purple-dark);
}
.button--purple:focus,
.button--purple:focus-visible {
	outline-color: var(--color-purple-dark);
}

.button--black {
	background: var(--color-brown);
	color: var(--color-white);
}
.button--black:hover {
	background: var(--color-gray-dark);
}
.button--black:active {
	background: var(--color-gray-dark);
}
.button--black:focus,
.button--black:focus-visible {
	outline-color: var(--color-gray);
}

.button--gray {
	background: var(--color-gray-light);
	color: var(--color-blue);
}
.button--gray:hover {
	background: var(--color-gray-9);
}
.button--gray:active {
	background: var(--color-gray-6);
}
.button--gray:focus,
.button--gray:focus-visible {
	outline-color: var(--color-gray);
}

.button--white {
	font-weight: 500;
	background: var(--color-white);
	color: var(--color-gray-dark);
	box-shadow: inset 0 0 0 1px var(--color-gray-9);
}
.button--white:hover {
	background: var(--color-gray-xlight);
	box-shadow: inset 0 0 0 1px var(--color-gray-6);
}
.button--white:active {
	color: var(--color-brown);
}
.button--white:focus,
.button--white:focus-visible {
	outline-color: var(--color-gray);
}

.button--blue .ico-holder:hover .fill_blue-gradient {
	fill: url(#dark-blue-gradient);
}
.button--blue .ico-holder:active .fill_blue-gradient {
	fill: #1D87B4;
}

.button--purple .ico-holder:hover .fill_purple {
	fill: url(#dark-purple-gradient);
}
.button--purple .ico-holder:active .fill_purple {
	fill: #6B4BC6;
}