.reader-share {
	.reader-share__button.button {
		color: var(--color-text-subtle);
		fill: var(--color-text-subtle);
		display: flex;
		align-items: center;
		padding: 0;
		font-size: $font-body-small;
		font-weight: 400;
		gap: 4px;
		line-height: normal;

		&:hover,
		&:active {
			color: var(--color-primary);
			fill: var(--color-primary);
		}

		&:focus {
			outline: thin dotted;
		}

		&.is-borderless {
			.gridicon {
				margin-right: 0;
				margin-top: 0;
			}
		}

		.gridicon {
			transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		}

		.gridicons-reblog {
			top: 0;
		}

		&.is-active {
			color: var(--color-primary);

			.gridicon {
				fill: var(--color-primary);
			}
		}

		&.tooltip {
			@include tooltip-base;
			@include tooltip-top;
		}
	}
}

.reader-share__button-label {
	margin-left: 6px;
	font-weight: normal;

	@include breakpoint-deprecated( "<480px" ) {
		@include hide-content-accessibly();
	}
}

.reader-share__popover {
	min-width: 240px;
	@include breakpoint-deprecated( "<480px" ) {
		width: 152px;
		padding-right: 2px;
	}
	.search {
		/* stylelint-disable-next-line scales/radii */
		border-radius: 6px;
		.search__icon-navigation {
			/* stylelint-disable-next-line scales/radii */
			border-bottom-left-radius: 6px;
			/* stylelint-disable-next-line scales/radii */
			border-top-left-radius: 6px;
		}
		.search__input.form-text-input[type="search"],
		.search__close-icon {
			/* stylelint-disable-next-line scales/radii */
			border-bottom-right-radius: 6px;
			/* stylelint-disable-next-line scales/radii */
			border-top-right-radius: 6px;
			padding: 6px 0;
		}
		&.is-open.has-focus {
			box-shadow: none;
			&:hover {
				box-shadow: none;
			}
		}
	}
}

.reader-share__popover-item {
	span {
		display: inline-block;
		line-height: 24px;
		margin-left: 34px;

		@include breakpoint-deprecated( ">480px" ) {
			margin-left: 27px;
		}
	}

	.gridicon,
	.reader-facebook,
	.reader-x {
		height: 20px;
		width: 20px;
		position: absolute;
		top: 9.75px;
		left: 18px;
		padding: 0;
		fill: var(--color-neutral-light);

		@include breakpoint-deprecated( ">480px" ) {
			left: 14px;
		}
	}

	.gridicons-my-sites {
		fill: var(--color-primary);
	}

	.reader-facebook {
		fill: var(--color-facebook);
	}

	.reader-x {
		fill: var(--color-x);
	}

	&:focus,
	&:hover {
		.gridicon,
		.reader-x,
		.reader-facebook {
			fill: var(--color-text-inverted);
		}
	}
}

.reader-popover.reader-share__popover {
	// Since this is in popover context, it won't inherit variable overrides from the global sidebar
	// or main reader frame. We set them here, otherwise they inherit the dark theme values used for
	// the global masterbar.
	--color-sidebar-submenu-background: var(--studio-gray-0);
	--color-sidebar-text: var(--studio-gray-80);
	min-width: 240px;

	.site-selector {
		height: auto;
		max-height: 220px;
		// The long-content-fade mixin applied further below fades to --color-surface, but for
		// the highlighted item we need to ensure that matches the background.
		.site.is-highlighted {
			--color-surface: var(--color-sidebar-submenu-background);
		}
	}

	&.is-top .popover__arrow::before,
	&.is-top-left .popover__arrow::before,
	&.is-top-right .popover__arrow::before {
		border-top: 10px solid #fff;
	}

	&.is-bottom-right .popover__arrow::before {
		border: 10px solid #fff;
	}
}

.reader-share__site-selector.site-selector {
	border-top: 1px solid var(--color-neutral-5);
}

.reader-share__site-selector .site-selector__sites {
	overflow-y: auto;
	text-align: left;
}

.reader-share__site-selector .site__content {
	padding: 12px 16px;
}

.reader-share__site-selector .site__title,
.reader-share__site-selector .site__domain {
	&::after {
		@include long-content-fade();
	}
}
