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

.ontario-task-list {
	border-top: globalFunctions.px-to-rem(2) solid colours.$ontario-greyscale-20;
	margin-left: spacing.$spacing-0;
	padding: spacing.$spacing-0;
	max-width: 48rem;

	li:last-child {
		padding-bottom: globalFunctions.px-to-rem(19);
	}
}

.ontario-task-list__container {
	padding: spacing.$spacing-0 spacing.$spacing-1;
}

.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;
		justify-content: space-between;
		align-items: flex-start;

		.ontario-task__text {
			display: flex;
			flex-direction: column;
			padding-right: spacing.$spacing-5;
		}

		.ontario-badge {
			align-self: center;
			white-space: nowrap;
		}

		@media screen and (max-width: breakpoints.$small-breakpoint) {
			flex-direction: column;
			align-items: flex-start;

			.ontario-badge {
				align-self: flex-start;
				margin-top: spacing.$spacing-2;
			}
		}
	}

	&__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;
		cursor: pointer;
	}

	&__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: globalFunctions.px-to-rem(4) 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-badge {
	text-decoration: none;

	.ontario-task-status--not-started & {
		background-color: colours.$ontario-colour-information-light;
	}

	.ontario-task-status--in-progress & {
		background-color: colours.$ontario-colour-information;
		color: colours.$ontario-colour-white;
	}

	.ontario-task-status--error & {
		background-color: colours.$ontario-colour-alert;
		color: colours.$ontario-colour-white;
	}

	.ontario-task-status--complete & {
		background-color: colours.$ontario-colour-white;
		border: globalFunctions.px-to-rem(1) solid colours.$ontario-greyscale-70;
	}

	.ontario-task-status--optional & {
		background-color: colours.$ontario-greyscale-5;
	}

	.ontario-task-status--cannot-start-yet & {
		background-color: colours.$ontario-greyscale-20;
	}
}
