@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/fonts.variables' as fonts;
@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-sizes.variables' as fontSizes;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;

.ontario-hint {
	color: colours.$ontario-greyscale-70;
	display: inline-block;
	margin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4 spacing.$spacing-0;
	width: globalVariables.$full-width;
	max-width: globalVariables.$standard-width;

	// This is a fix to prevent auto-detection of phone numbers in Firefox & Safari on iPhone devices
	a[x-apple-data-detectors] {
		color: inherit;
		cursor: none;
		text-decoration: none;
	}
}

.ontario-hint-expander__container {
	max-width: globalVariables.$standard-width;
}

.ontario-hint-expander__button {
	color: colours.$ontario-colour-link;
	cursor: pointer;
	background: none;
	border: none;
	display: flex;
	font-family: fonts.$ontario-font-open-sans;
	font-weight: fontWeights.$ontario-font-weights-normal;
	font-size: fontSizes.$ontario-font-size-standard-body-text;
	text-align: left;
	margin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4 spacing.$spacing-0;
	padding: spacing.$spacing-0 spacing.$spacing-1 spacing.$spacing-0 spacing.$spacing-0;

	&-icon--close {
		display: none;
		margin-right: spacing.$spacing-1;
	}

	&-icon--open {
		display: inline-block;
		margin-right: spacing.$spacing-1;
	}

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

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

	&:focus,
	&:active {
		@extend %ontario-focus;
	}
}

.ontario-hint-expander__content {
	border-left: 4px solid colours.$ontario-greyscale-20;
	color: colours.$ontario-colour-black;
	background-color: colours.$ontario-greyscale-5;
	display: none;
	padding: spacing.$spacing-4 spacing.$spacing-4 spacing.$spacing-4 (spacing.$spacing-4 + spacing.$spacing-1);
	margin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4 spacing.$spacing-1;

	& *:last-child {
		margin-bottom: spacing.$spacing-0;
	}

	& img {
		width: globalVariables.$full-width;

		@media screen and (min-width: breakpoints.$small-breakpoint) {
			width: 50%;
		}
	}
}

.ontario-hint-expander__content.ontario-expander__content--opened {
	display: block;
}

.ontario-hint-expander__container.ontario-expander--active {
	.ontario-hint-expander__button-icon--close {
		display: inline-block;
	}

	.ontario-hint-expander__button-icon--open {
		display: none;
	}
}

.ontario-input + .ontario-hint-expander__container {
	margin-top: calc(-1 * spacing.$spacing-5) !important;
}

.ontario-checkboxes__item .ontario-hint-expander__container,
.ontario-radios__item .ontario-hint-expander__container {
	margin-left: spacing.$spacing-2;
}

.ontario-checkboxes__label + .ontario-hint-expander__container,
.ontario-radios__label + .ontario-hint-expander__container {
	margin-top: spacing.$spacing-3;

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