/* Google Preferred Source — кнопка «Додати нас у джерела Google» */

.gps {
	display: flex;
	margin-top: var(--gps-mt, 6px);
	margin-bottom: var(--gps-mb, 16px);
	margin-left: 0;
	margin-right: 0;
	line-height: 1;
}

.gps--align-center { justify-content: center; }
.gps--align-right  { justify-content: flex-end; }
.gps--align-left   { justify-content: flex-start; }

.gps__link {
	--gps-bg: #ffffff;
	--gps-border: #dadce0;
	--gps-text: #1f1f1f;
	--gps-bg-hover: #f5f7fa;
	--gps-border-hover: #c2c7cd;
	--gps-radius: 8px;

	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 40px;
	max-width: 100%;
	padding: 8px 15px;
	border: 1px solid var(--gps-border);
	border-radius: var(--gps-radius);
	background-color: var(--gps-bg);
	color: var(--gps-text);
	font-family: inherit;
	font-size: var(--gps-font, 15px);
	font-weight: var(--gps-weight, 600);
	line-height: 1.3;
	text-decoration: none;
	box-shadow: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .15s ease, border-color .15s ease;
}

.gps__link:hover,
.gps__link:focus {
	background-color: var(--gps-bg-hover);
	border-color: var(--gps-border-hover);
	color: var(--gps-text);
	text-decoration: none;
}

.gps__link:focus-visible {
	outline: 2px solid #1a73e8;
	outline-offset: 2px;
}

.gps__icon {
	display: flex;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

/* --- жирність --- */

.gps--fw-400 .gps__link { --gps-weight: 400; }
.gps--fw-500 .gps__link { --gps-weight: 500; }
.gps--fw-600 .gps__link { --gps-weight: 600; }
.gps--fw-700 .gps__link { --gps-weight: 700; }

/* --- розмір тексту --- */

.gps--size-small  .gps__link { --gps-font: 13.5px; }
.gps--size-small  .gps__icon { width: 16px; height: 16px; }
.gps--size-normal .gps__link { --gps-font: 15px; }
.gps--size-large  .gps__link { --gps-font: 16px; }
.gps--size-large  .gps__icon { width: 20px; height: 20px; }

.gps__icon svg,
.gps__arrow svg {
	display: block;
	width: 100%;
	height: 100%;
}

.gps__label {
	display: block;
	min-width: 0;
}

.gps__arrow {
	display: none;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	margin-left: auto;
	padding-left: 10px;
	opacity: .4;
	box-sizing: content-box;
}

.gps__link:hover .gps__arrow { opacity: .7; }

/* --- заокруглення --- */

.gps--r-pill    .gps__link { --gps-radius: 999px; }
.gps--r-rounded .gps__link { --gps-radius: 8px; }
.gps--r-square  .gps__link { --gps-radius: 3px; }

/* --- ширина --- */

.gps--w-full { display: block; }

.gps--w-full .gps__link {
	display: flex;
	width: 100%;
	min-height: 50px;
	padding: 13px 16px;
	justify-content: flex-start;
}

.gps--w-full .gps__arrow { display: block; }

.gps--w-full.gps--align-center .gps__link { justify-content: center; }
.gps--w-full.gps--align-right  .gps__link { justify-content: flex-end; }
.gps--w-full.gps--align-center .gps__arrow,
.gps--w-full.gps--align-right  .gps__arrow { display: none; }

/* --- варіанти вигляду --- */

.gps--style-soft .gps__link {
	--gps-bg: #f1f3f4;
	--gps-border: transparent;
	--gps-bg-hover: #e8eaed;
	--gps-border-hover: transparent;
}

.gps--style-outline .gps__link {
	--gps-bg: transparent;
	--gps-border: currentColor;
	--gps-bg-hover: rgba(0, 0, 0, .04);
	--gps-border-hover: currentColor;
	color: inherit;
	opacity: .9;
}

.gps--style-outline .gps__link:hover { opacity: 1; }

/* --- мобільні --- */

@media (max-width: 600px) {
	.gps__link {
		min-height: 42px;
		padding: 10px 14px;
		gap: 9px;
	}

	.gps--w-full .gps__link {
		min-height: 48px;
		padding: 12px 14px;
	}

	.gps--size-small  .gps__link { --gps-font: 13px; }
	.gps--size-normal .gps__link { --gps-font: 14.5px; }
	.gps--size-large  .gps__link { --gps-font: 15.5px; }
}

@media (max-width: 380px) {
	.gps--size-normal .gps__link { --gps-font: 14px; }
	.gps--size-large  .gps__link { --gps-font: 15px; }
	.gps__label { white-space: normal; }
}

/* --- темна тема --- */

@media (prefers-color-scheme: dark) {
	.gps__link {
		--gps-bg: rgba(255, 255, 255, .04);
		--gps-border: rgba(255, 255, 255, .22);
		--gps-text: inherit;
		--gps-bg-hover: rgba(255, 255, 255, .09);
		--gps-border-hover: rgba(255, 255, 255, .34);
	}

	.gps--style-soft .gps__link {
		--gps-bg: rgba(255, 255, 255, .07);
		--gps-border: transparent;
		--gps-bg-hover: rgba(255, 255, 255, .12);
		--gps-border-hover: transparent;
	}

	.gps--style-outline .gps__link {
		--gps-bg-hover: rgba(255, 255, 255, .08);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gps__link { transition: none; }
}
