@use "@automattic/jetpack-base-styles/style";
@use "mixin";
@use "../scss/mixins/breakpoints";
@use "../scss/mixins/rna";
@use "../scss/calypso-colors";

.jp-recommendations-question__main {
	min-height: 480px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.03);
	border: 1px solid calypso-colors.$gray-lighten-20;
	background: var(--jp-white);

	a:not([type="button"]) {
		// $has-focus-state: false - we don't need a focus state for navigation links
		@include rna.rna-link( $has-focus-state: false );
	}
}

.jp-recommendations-question__main--with-sidebar {
	display: grid;
	grid-template-columns: repeat(2, 1fr);

	@include breakpoints.breakpoint( "<1040px" ) {
		grid-template-columns: auto;
		background: var(--jp-white);
	}
}

.jp-recommendations__loading {
	padding-top: 48px;
}

.jp-recommendations__new-badge {
	display: inline-block;
	padding: 2px 8px;
	color: var(--jp-green-30);
	border: 1px solid var(--jp-green-30);
	text-transform: uppercase;
	font-weight: 500;
	border-radius: 3px;
	font-size: 12px;
}

.jp-recommendations-question__sidebar {

	@include mixin.recommendation-sidebar-blob;

	@include breakpoints.breakpoint( "<1040px" ) {
		background: none;
	}
}

.jp-recommendations__links {
	text-align: center;
	margin-top: 3rem;

	a {
		margin-right: 16px;

		@include breakpoints.breakpoint( "<660px" ) {
			display: block;
			margin-right: 0;
			margin-bottom: 16px;
		}

		&:last-child {
			margin-right: 0;

			@include breakpoints.breakpoint( "<660px" ) {
				margin-bottom: 0;
			}
		}

		&,
		&:active,
		&:hover,
		&:link,
		&:visited {
			color: var(--jp-black);
			text-decoration: underline;
		}

		&:focus {
			border-radius: 2px;
			outline-offset: 3px;
			outline: 1.5px solid var(--jp-black);
			box-shadow: none;
			text-decoration: none;
		}

		&:hover {
			text-decoration-thickness: var(--jp-underline-thickness);
		}

		&:hover:focus {
			text-decoration: none;
		}
	}
}
