@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/breakpoints.variables' as breakpoints;
@use '../ontario-button/ontario-button.scss';

$ontario-icon-size: 24px;

/**
* Tertiary button defaults are overridden to achieve the mini-button specifications
* width is unset in small screen size to remove unnecessary space being added to the button
* min-width and max-width are set for small screen size to ensure the "back" button doesn't break and protrude into the text to the right
*/

.ontario-back-button {
	display: flex;
	align-items: center;
	margin: spacing.$spacing-3 spacing.$spacing-0 spacing.$spacing-4;
	padding-left: spacing.$spacing-2;
	padding-right: spacing.$spacing-4;
	min-width: spacing.$spacing-8;

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		width: unset;
	}

	.ontario-icon {
		margin: spacing.$spacing-0 math.div(spacing.$spacing-3, 2) spacing.$spacing-0 spacing.$spacing-0;
		padding: spacing.$spacing-0;
		min-width: $ontario-icon-size;
		min-height: $ontario-icon-size;
	}
}

.ontario-back-button--disabled {
	pointer-events: none;
	opacity: 0.65;
	text-decoration: none;
}