@layer old,common,page,component,overrides;

@layer common {
	._button_1vsqs_4 {
		--button-column-gap: 8px;
		--button-icon-size: 20px;
		--button-padding: 8px;
		--button-padding-left: calc(var(--button-padding)*2);
		--button-padding-right: calc(var(--button-padding)*2);
		--icon-right: 0;
		align-items: center;
		background: var(--button-bg);
		border: none;
		border: var(--button-border,none);
		border-radius: 8px;
		box-shadow: 0 0 0 0 var(--form-input-border--focus);
		color: var(--button-fg);
		-moz-column-gap: var(--button-column-gap);
		column-gap: var(--button-column-gap);
		cursor: pointer;
		display: flex;
		font-family: Roboto,sans-serif;
		font-size: 16px;
		font-weight: 400;
		height: 40px;
		justify-content: center;
		margin: 0;
		outline: none;
		padding: var(--button-padding) var(--button-padding-right) var(--button-padding) var(--button-padding-left);
		text-decoration: none;
		transition: box-shadow .15s ease-in-out;
		-webkit-user-select: none;
		-moz-user-select: none;
		user-select: none;
		white-space: nowrap;
	}

	._button_1vsqs_4[\:has\(svg\)] {
		--button-padding-right: calc(var(--button-padding)*(2 - var(--icon-right)));
		--button-padding-left: calc(var(--button-padding)*(1 + var(--icon-right)));
	}

	._button_1vsqs_4:has(svg) {
		--button-padding-right: calc(var(--button-padding)*(2 - var(--icon-right)));
		--button-padding-left: calc(var(--button-padding)*(1 + var(--icon-right)));
	}

	._button_1vsqs_4 svg {
		height: var(--button-icon-size);
		width: var(--button-icon-size);
	}

	._button_1vsqs_4._focus-visible_1vsqs_1 {
		box-shadow: 0 0 0 3px var(--form-input-border--focus);
	}

	._button_1vsqs_4:focus-visible {
		box-shadow: 0 0 0 3px var(--form-input-border--focus);
	}@	media (hover:hover) {
		._button_1vsqs_4: hover{background:var(--button-bg);
		background: var(--button-bg--hover,var(--button-bg));
		border: none;
		border: var(--button-border--hover,var(--button-border,none));
		color: var(--button-fg);
		color: var(--button-fg--hover,var(--button-fg));
	}
}

._button_1vsqs_4:disabled {
	cursor: not-allowed;
	opacity: .5!important;
}

._button--icon_1vsqs_82 {
	--button-width: 40px;
	--button-height: var(--button-width);
	flex-basis: var(--button-width);
	flex-grow: 0;
	height: var(--button-height);
	padding-block: 0;
	padding-inline: var(--button-padding);
	width: var(--button-width);
}

@media (--mobile-l),(--mobile-s) {
@	layer common {
		._button--icon-on-mobile_1vsqs_1{--button-width: 40px;
		--button-height: var(--button-width);
		flex-basis: var(--button-width);
		flex-grow: 0;
		height: var(--button-height);
		padding-block: 0;
		padding-inline: var(--button-padding);
		width: var(--button-width);
	}
}}}

@layer component {
	._green_1vsqs_89 {
		--button-bg: var(--green);
		--button-bg--hover: var(--green-2);
		--button-fg: #fff;
	}

	._primary_1vsqs_95 {
		--button-bg: var(--v9-color-dwhite-ld5);
		--button-fg: var(--v9-color-text-header-inverse);
		--button-bg--hover: var(--v9-color-dl1-ld4);
	}

	._secondary_1vsqs_101 {
		--button-bg: var(--v9-color-d1-l2);
		--button-bg--hover: var(--v9-color-d2-l3);
		--button-fg: var(--v9-color-text-body);
		--button-border: 1px solid var(--v9-color-d2-l3);
		--button-border--hover: 1px solid var(--v9-color-d3-l4);
	}

	._text-button_1vsqs_109 {
		--button-fg: var(--v9-color-text-d-min-vis-l-gray);
		--button-fg--hover: var(--brand-red);
		align-self: start;
		height: 24px;
		padding: 0;
	}

	._text-button_1vsqs_109 svg {
		height: 24px;
		width: 24px;
	}

	._outline_1vsqs_123 {
		--button-bg: transparent;
		--button-fg: var(--v9-color-text-gray);
		--button-border: 1px solid var(--v9-color-d3-l4);
		--button-border--hover: 1px solid var(--v9-color-5);
	}

	._outline--green_1vsqs_1 {
		--button-fg: var(--green);
		--button-border: 1px solid var(--green);
		--button-border--hover: 1px solid var(--green-2);
	}

	._plain_1vsqs_136 {
		--button-bg: transparent;
		--button-fg: var(--v9-color-text-gray);
		--button-fg--hover: var(--brand-red);
		--button-border: none;
		--button-border--hover: none;
		--button-padding: 0;
		height: auto;
	}

	._icon-button_1vsqs_147 {
		--button-fg: var(--v9-color-text-gray);
		--button-fg--hover: var(--brand-red);
	}

	._social_1vsqs_152 {
		--button-fg: #fff;
	}@	layer common {
		._social_1vsqs_152{--button-column-gap: 8px;
		--button-icon-size: 20px;
		--button-padding: 8px;
		--button-padding-left: calc(var(--button-padding)*2);
		--button-padding-right: calc(var(--button-padding)*2);
		--icon-right: 0;
		align-items: center;
		background: var(--button-bg);
		border: none;
		border: var(--button-border,none);
		border-radius: 8px;
		box-shadow: 0 0 0 0 var(--form-input-border--focus);
		color: var(--button-fg);
		-moz-column-gap: var(--button-column-gap);
		column-gap: var(--button-column-gap);
		cursor: pointer;
		display: flex;
		font-family: Roboto,sans-serif;
		font-size: 16px;
		font-weight: 400;
		height: 40px;
		justify-content: center;
		margin: 0;
		outline: none;
		padding: var(--button-padding) var(--button-padding-right) var(--button-padding) var(--button-padding-left);
		text-decoration: none;
		transition: box-shadow .15s ease-in-out;
		-webkit-user-select: none;
		-moz-user-select: none;
		user-select: none;
		white-space: nowrap;
	}

	._social_1vsqs_152[\:has\(svg\)] {
		--button-padding-right: calc(var(--button-padding)*(2 - var(--icon-right)));
		--button-padding-left: calc(var(--button-padding)*(1 + var(--icon-right)));
	}
}

@layer common {
	._social_1vsqs_152:has(svg) {
		--button-padding-right: calc(var(--button-padding)*(2 - var(--icon-right)));
		--button-padding-left: calc(var(--button-padding)*(1 + var(--icon-right)));
	}
}

@layer common {
	._social_1vsqs_152 svg {
		height: var(--button-icon-size);
		width: var(--button-icon-size);
	}

	._social_1vsqs_152._focus-visible_1vsqs_1 {
		box-shadow: 0 0 0 3px var(--form-input-border--focus);
	}
}

@layer common {
	._social_1vsqs_152:focus-visible {
		box-shadow: 0 0 0 3px var(--form-input-border--focus);
	}
}

@layer common {
@	media (hover:hover) {
		._social_1vsqs_152: hover{background:var(--button-bg);
		background: var(--button-bg--hover,var(--button-bg));
		border: none;
		border: var(--button-border--hover,var(--button-border,none));
		color: var(--button-fg);
		color: var(--button-fg--hover,var(--button-fg));
	}
}}

@layer common {
	._social_1vsqs_152:disabled {
		cursor: not-allowed;
		opacity: .5!important;
	}
}

._social_1vsqs_152 {
	align-items: center;
	aspect-ratio: 1;
	-webkit-clip-path: url(#squircle);
	clip-path: url(#squircle);
	display: flex;
	justify-content: center;
	padding: 0;
	position: relative;
}

._social_1vsqs_152:after {
	background-color: #161b1d99;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='18' height='18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 1 1 17m16 0L1 1' stroke='%23fff' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: 50%;
	background-repeat: no-repeat;
	content: "";
	height: 100%;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	transition: opacity .3s ease-in-out;
	width: 100%;
}

._social--vk_1vsqs_1,._social--vkontakte_1vsqs_1 {
	--button-bg: #07f;
}

._social--vk_1vsqs_1 svg,._social--vkontakte_1vsqs_1 svg {
	height: 30px;
	width: 30px;
}

._social--facebook_1vsqs_1 {
	--button-bg: #3a559f;
}

._social--youtube_1vsqs_1 {
	--button-bg: #d8362a;
}

._social--twitter_1vsqs_1 {
	--button-bg: #1d9bf0;
}

._social--telegram_1vsqs_1 {
	--button-bg: #61a8de;
}

._social--instagram_1vsqs_1 {
	--button-bg: #c536a4;
}

._social--steam_1vsqs_1 {
	--button-bg: #919191;
}

._social--twitch_1vsqs_1 {
	--button-bg: #9300ff;
}

._social--stopgame_1vsqs_1 {
	--button-bg: #ec1d24;
}

._social--gplus_1vsqs_1 {
	--button-bg: #ed1c24;
}

._social--google_1vsqs_1 {
	--button-bg: #4285f4;
}

._social--mailru_1vsqs_1 {
	--button-bg: #fc2c38;
}

._social--odnoklassniki_1vsqs_1 {
	--button-bg: #ee8208;
}

._social--yandex_1vsqs_1 {
	--button-bg: red;
}

._social--myworld_1vsqs_1 {
	--button-bg: #3077c9;
}

._social--whatsapp_1vsqs_1 {
	--button-bg: #25d466;
}

._social--discord_1vsqs_1 {
	--button-bg: #7289da;
}

@media (hover:hover) {
	._social_1vsqs_152:hover:after {
		opacity: 1;
	}
}

@supports not (background:paint(squircle)) {
	._social_1vsqs_152 {
		border-radius: 8px;
		box-shadow: 0 0 0 0 0;
		box-shadow: 0 0 0 0 var(--focus-color,0);
		transition: box-shadow .15s ease-in-out;
	}

	._social_1vsqs_152._focus-visible_1vsqs_1 {
		box-shadow: 0 0 0 3px 1;
		box-shadow: 0 0 0 3px var(--focus-color,1);
	}

	._social_1vsqs_152:focus-visible {
		box-shadow: 0 0 0 3px 1;
		box-shadow: 0 0 0 3px var(--focus-color,1);
	}
}

._game-status-button_1vsqs_281 {
	--button-icon-size: 24px;
	display: flex;
}

._game-status-button--wishlist_1vsqs_1 {
	--button-bg: var(--wishlist-color);
	--button-fg: #fff;
	--button-bg--hover: var(--wishlist-color--hover);
}

._game-status-button--playing_1vsqs_1 {
	--button-bg: var(--playing-color);
	--button-fg: #fff;
	--button-bg--hover: var(--playing-color--hover);
}

._game-status-button--beaten_1vsqs_1 {
	--button-bg: var(--beaten-color);
	--button-fg: #fff;
	--button-bg--hover: var(--beaten-color--hover);
}

._game-status-button--trashed_1vsqs_1 {
	--button-bg: var(--sleep-color);
	--button-fg: #fff;
	--button-bg--hover: var(--sleep-color--hover);
}

@media (max-width:640px) {
	._game-status-button_1vsqs_281 {
		--button-icon-size: 20px;
		font-size: 14px;
		height: 32px;
		line-height: 14px;
	}
}}
/*# sourceMappingURL=buttons.css.map */