.shareLinks
	display: grid
	grid-template-rows: auto auto
	grid-auto-flow: column
	padding: 12px
	width: max-content

	.header
		font-size: 18px
		font-weight: bold
		margin: 4px 0px 8px
		color: var(--primary-text-color)

	.buttons
		display: flex
		flex-direction: column

		.action
			padding: 6px

	.divider
		grid-row: span 3
		margin: 0px 12px
		width: 1px
		background: var(--tertiary-text-color)

	.youtubeLogo
		height: 18px
		width: auto

		@at-root
			.dark &
				filter: brightness(0.868)

			.light &
				filter: invert(0.87)

	.invidious
		display: flex
		justify-content: center
		letter-spacing: -0.4px

		.invidiousLogo
			display: inline-block
			width: 20px
			height: 20px
			background-size: cover
			margin-right: 2px

			@at-root
				.dark &
					background-image: url(~../../assets/img/invidious-logo-dark.svg)

				.light &
					background-image: url(~../../assets/img/invidious-logo-light.svg)