$follow-button-gray-disabled: var(--color-neutral-10);

.follow-button,
button.follow-button {
	align-items: center;
	background: unset;
	border: 0;
	display: flex;
	padding: 0;

	svg.reader-follow-feed {
		pointer-events: auto;

		path {
			fill: var(--color-text-subtle);
		}
	}

	.follow-button__label {
		color: var(--color-text-subtle);
		margin-left: 3px;
		white-space: nowrap;
	}

	&:hover {
		color: var(--color-success);

		.follow-button__label {
			color: var(--color-success);
		}

		svg.reader-follow-feed path {
			fill: var(--color-success);
		}
	}

	&:focus {
		box-shadow: none;
	}

	// Hides Following icon by default
	svg.reader-following-feed {
		display: none;
		pointer-events: none;
	}

	&.is-following {
		svg.reader-following-feed {
			display: inline-block;
			pointer-events: auto;

			path {
				fill: var(--color-success);
			}
		}

		.follow-button__label {
			color: var(--color-success);
		}

		// Hides Follow icon if already following
		svg.reader-follow-feed {
			display: none;
			pointer-events: none;
		}

		&:hover {
			color: var(--color-success);

			svg.reader-following-feed {
				path {
					fill: var(--color-success);
				}
			}
		}
	}

	.gridicon {
		height: 18px;
		padding-right: 6px;
		top: 5px;
		width: 18px;
	}

	&.is-disabled {
		@include no-select();
		color: $follow-button-gray-disabled;
		border-color: $follow-button-gray-disabled;
		pointer-events: none;

		.follow-button__label {
			color: $follow-button-gray-disabled;
		}

		svg.reader-follow-feed,
		svg.reader-following-feed {
			path {
				fill: $follow-button-gray-disabled;
			}
		}

		&:hover {
			color: $follow-button-gray-disabled;
			cursor: default;

			svg.reader-follow-feed,
			svg.reader-following-feed {
				path {
					fill: $follow-button-gray-disabled;
				}
			}
		}

		&:active {
			border-width: 1px 1px 2px;
		}
	}

	&.has-button-style,
	&.has-button-style:hover {
		background-color: var(--color-accent);
		border-radius: 4px;
		box-sizing: border-box;
		font-weight: 500;
		padding: 12px 24px 12px 20px;

		svg.reader-follow-feed * {
			fill: var(--color-text-inverted);
		}

		.follow-button__label {
			color: var(--color-text-inverted);
			margin-left: 8px;

			@include breakpoint-deprecated( "<660px" ) {
				display: unset;
			}
		}

		&.is-following,
		&.is-following:hover {
			background-color: var(--color-surface);
			border: 1px solid var(--color-neutral-10);

			.follow-button__label {
				color: var(--color-text);
			}
		}
	}
}

.follow-button__label {
	@include breakpoint-deprecated( "<660px" ) {
		display: none;
	}
}

// Override .button style
.button.follow-button .gridicon:not(:last-child) {
	margin-right: 0;
}
