.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 &, .system[data-system-theme*='dark'] &
				filter: brightness(0.868)

			.black &
				filter: brightness(0.933)

			/* no changes for the dracula theme */

			.light &, .system[data-system-theme*='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 &,
				.black &,
				.dracula &,
				.CatppuccinMocha &,
				.system[data-system-theme*='dark'] &
					background-image: url(../../assets/img/invidious-logo-dark.svg)

				.light &, .system[data-system-theme*='light'] &
					background-image: url(../../assets/img/invidious-logo-light.svg)