@use 'sass:math';
@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/spacing.variables' as spacing;
@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/colours.variables' as colours;
@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/2-tools/functions/global.functions' as globalFunctions;
@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/breakpoints.variables' as breakpoints;
@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/2-tools/placeholder/focus.placeholders' as placeholders;
@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/font-weights.variables' as fontWeights;

.ontario-task {
	border-bottom: globalFunctions.px-to-rem(2) solid colours.$ontario-greyscale-20;
	padding: globalFunctions.px-to-rem(20) spacing.$spacing-0;
	list-style: none;

	&__content {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: spacing.$spacing-4;

		@media screen and (max-width: breakpoints.$small-breakpoint) {
			flex-direction: column;
			align-items: flex-start;
			justify-content: flex-start;
			gap: spacing.$spacing-2;
		}
	}

	.ontario-task__text {
		display: flex;
		flex-direction: column;
	}

	&__label {
		text-align: left;
		margin: spacing.$spacing-0;
		font-size: globalFunctions.px-to-rem(19);
		font-weight: fontWeights.$ontario-font-weights-semi-bold;
		display: inline-block;

		@media screen and (max-width: breakpoints.$small-breakpoint) {
			margin-bottom: spacing.$spacing-2;
		}

		a {
			text-decoration: none;
			color: inherit;

			&:hover {
				text-decoration: underline;
			}
		}
	}

	&__link {
		display: block;
		text-decoration: none;
		color: colours.$ontario-colour-link;
		font-weight: normal;
	}

	&__hint-text--true {
		margin-bottom: spacing.$spacing-2;
	}

	&--error {
		padding-left: spacing.$spacing-4;
		border-left: globalFunctions.px-to-rem(4) solid colours.$ontario-colour-alert;
		margin-left: globalFunctions.px-to-rem(-2);
	}

	.ontario-hint {
		margin-bottom: spacing.$spacing-0;
	}
}

.ontario-task:focus-within {
	outline: 4px solid colours.$ontario-colour-focus;
}

.ontario-task__link {
	.ontario-task__label {
		text-decoration: underline;
	}
}

.ontario-task__link:focus {
	outline: none;
	box-shadow: none;
}

.ontario-task:has(.ontario-task__link) {
	&:hover {
		background-color: colours.$ontario-greyscale-5;
	}
}

@mixin link-states {
	&:visited .ontario-task__label {
		color: colours.$ontario-colour-link--visited;
	}
	&:hover .ontario-task__label {
		color: colours.$ontario-colour-link--hover;
	}
	&:active .ontario-task__label {
		color: colours.$ontario-colour-link--active;
	}
}

.ontario-task {
	&--status-completed,
	&--status-inprogress,
	&--status-notstarted,
	&--status-optional,
	&--status-error {
		.ontario-task__link {
			.ontario-task__label {
				color: colours.$ontario-colour-link;
				text-decoration: underline;
			}
			@include link-states;
		}
	}
}

ontario-hint-text::part(hint-text) {
	margin: spacing.$spacing-0;
}