@use 'sass:math';
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
@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/1-variables/breakpoints.variables' as breakpoints;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;
@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/font-sizes.variables' as fontSizes;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;

.ontario-summary-list {
	max-width: globalVariables.$standard-width;
	float: revert;
	margin-bottom: spacing.$spacing-9;

	&.summary-list-full-width {
		max-width: 100%;
	}

	dl.ontario-summary-list__container {
		margin: spacing.$spacing-0;

		// Default Ratio 1:1
		.ontario-summary-list__key,
		.ontario-summary-list__value {
			flex: 1;
		}

		// 1:2 ratio
		&.ontario-summary-list-ratio__1-2 {
			.ontario-summary-list__key {
				flex: 1;
			}

			.ontario-summary-list__value {
				flex: 2;
			}
		}

		// 1:3 ratio
		&.ontario-summary-list-ratio__1-3 {
			.ontario-summary-list__key {
				flex: 1;
			}

			.ontario-summary-list__value {
				flex: 3;
			}
		}

		// 2:1 ratio
		&.ontario-summary-list-ratio__2-1 {
			.ontario-summary-list__key {
				flex: 2;
			}

			.ontario-summary-list__value {
				flex: 1;
			}
		}

		// 2:3 ratio
		&.ontario-summary-list-ratio__2-3 {
			.ontario-summary-list__key {
				flex: 2;
			}

			.ontario-summary-list__value {
				flex: 3;
			}
		}
	}

	.ontario-summary-list__row {
		display: flex;
		flex-direction: row;
		padding: (spacing.$spacing-4 + globalFunctions.px-to-rem(3)) spacing.$spacing-0;
		border-bottom: 1px solid colours.$ontario-greyscale-20;
		align-items: flex-start;
		justify-content: space-between;
		margin: spacing.$spacing-0 !important;

		&.compact {
			padding: spacing.$spacing-3 spacing.$spacing-0;
		}

		.ontario-summary-list__key {
			@extend %h5-styles;
			margin-bottom: spacing.$spacing-0;

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

		.ontario-summary-list__value {
			padding-left: spacing.$spacing-5;

			@media screen and (max-width: breakpoints.$small-breakpoint) {
				flex: revert;
				padding: spacing.$spacing-0;
			}
		}

		dt,
		dd {
			margin: spacing.$spacing-0 !important; // using important as fractal default styles were causing issues
			text-align: left;
		}

		.ontario-summary-list-button__container {
			text-align: right;
			flex-basis: 3.5rem;
			padding-left: spacing.$spacing-5;

			@media screen and (max-width: breakpoints.$small-breakpoint) {
				flex-basis: revert;
				align-self: flex-start;
				padding-left: spacing.$spacing-0;
			}
		}

		.ontario-summary-list-change__button {
			display: block;
			text-decoration: underline;
			cursor: pointer;
			font-size: fontSizes.$ontario-font-size-standard-body-text;
			color: colours.$ontario-colour-link;
			font-weight: fontWeights.$ontario-font-weights-normal;
			padding: spacing.$spacing-0;

			&.hidden {
				visibility: hidden;
			}

			&:hover {
				color: colours.$ontario-colour-link--hover;
			}

			&:active {
				color: colours.$ontario-colour-link--active;
			}

			@media screen and (max-width: breakpoints.$small-breakpoint) {
				margin-top: spacing.$spacing-3;
				padding: spacing.$spacing-0;
			}
		}

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

	.ontario-summary-list__row--no-actions {
		&::after {
			content: '';
			width: 5rem;
		}
	}

	.ontario-summary-list-heading__container {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 3px solid colours.$ontario-colour-black;
		gap: spacing.$spacing-6;
		padding-bottom: spacing.$spacing-3;

		.ontario-summary-list__heading {
			@extend %h3-styles;
			margin-bottom: spacing.$spacing-0;
		}

		.ontario-summary-list-heading__buttons {
			display: flex;
			gap: 2rem;
		}

		.ontario-summary-list-change__button {
			padding: spacing.$spacing-0;
		}

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

.ontario-summary-list__title {
	margin-bottom: spacing.$spacing-6;
}
