$whatsapp: #2ab318;

.share-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;

	a {
		color: #fff;
		border-radius: 4px;

		&:hover {
			color: #fff;
		}

		>span {
			display: flex;
			align-items: center;

			>svg {
				border-radius: var(--jp-border-radius);
				color: #fff;
			}
		}
	}

	:global a.components-button svg {
		fill: currentColor;
	}

	:global :is(a, button).has-text.components-button.is-primary {
		padding: 0;
		background: transparent;
		justify-content: start;
		color: var(--jp-black);
		gap: 0;

		&:hover {
			background: transparent;
			color: var(--jp-gray-50);
		}

		svg {
			padding: calc(var(--spacing-base) / 2);
			width: calc(var(--spacing-base) * 3);
			height: calc(var(--spacing-base) * 3);
		}

		&:focus {
			border: 0;
			outline: none;
			box-shadow: none;
		}
	}

	.x {
		background-color: var(--jp-black);
	}

	.whatsapp {
		background-color: $whatsapp;
	}

	.facebook {
		background-color: var(--color-facebook);
		// I hate !important, but social icon has it, so it needs to be overriden
		border-radius: var(--jp-border-radius) !important;
	}

	.clipboard {
		background-color: #fff;
		outline: 1px solid var(--jp-gray);
		color: var(--jp-black);
	}
}

.vertical {
	flex-direction: column;
}

.container {
	display: flex;
}

.label.label {
	font-size: 13px;
	font-weight: 400;
	line-height: 24px;
	margin-inline-start: var(--spacing-base);
}
