@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";
@import "@automattic/typography/styles/fonts";

.goals-step .step-container {
	&__skip-wrapper {
		// I really hate this, but forcing a specificity is not much better.
		margin-inline-start: 0 !important;

		@include break-small {
			margin-inline-start: auto !important;
		}
	}

	&__header, &__content {
		margin-inline: 16px;
	}
}

.select-goals {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;

	&__cards-container {
		font-family: Inter, $sans;
		display: grid;
		gap: 12px;
		width: 100%;
		grid-template-columns: repeat(1, 1fr);

		@include break-small {
			width: auto;
			grid-template-columns: repeat(2, 1fr);

			.select-goals__cards-hint {
				grid-column: span 2;
			}
		}

		.select-goals__goal-title {
			margin-inline-end: 4px;
		}
	}

	.select-goals__alternative-flows-container {
		display: grid;
		width: 100%;
		grid-template-columns: 1fr;
		gap: 20px 8px;
		padding-bottom: 60px + 48px; // height of sticky footer

		@include break-small {
			justify-content: center;
			padding-bottom: 60px;
			grid-template-columns: repeat(3, max-content);
			gap: 16px 8px;
		}
	}

	.select-goals__next {
		padding: 0.5rem 3rem;
	}

	.components-button.select-goals__link.is-link { // extra specificity to override default link styles
		color: var(--color-neutral-100);
		font-size: $font-body-small;
		justify-content: flex-start;
		width: fit-content;
	}

	.select-goals__dashboard-button.select-goals__link { // extra specificity to override default link styles
		margin-left: 0;
		margin-right: auto;
		gap: 8px;
		display: flex;
		justify-content: flex-start;

		@include break-small {
			grid-column: span 3;
			margin-left: auto;
		}
	}

	.select-goals__link-separator {
		display: none;

		&::before {
			content: "•";
		}

		@include break-small {
			display: block;
		}
	}
}

.step-container-v2--goals {
	.select-goals,
	.select-goals__cards-container {
		width: 100%;
	}

	.select-goals__alternative-flows-container {
		padding-bottom: 0;
	}
}
