@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/functions/global.functions' as globalFunctions;
@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-focus-transition: box-shadow 0.1s ease-in-out;

// Colour variables
$ontario-colour-back-to-top--default-background: #e6e6e6;
$ontario-colour-back-to-top--active-background: #b2b2b2;

$default-padding-top: globalFunctions.px-to-rem(8);
$default-padding-right: globalFunctions.px-to-rem(16);
$default-padding-bottom: globalFunctions.px-to-rem(8);
$default-padding-left: globalFunctions.px-to-rem(12);

$default-icon-margin-top: globalFunctions.px-to-rem(1);
$default-icon-margin-right: globalFunctions.px-to-rem(8);
$default-icon-margin-bottom: globalFunctions.px-to-rem(1);
$default-icon-margin-left: spacing.$spacing-0;

$tablet-padding-top: globalFunctions.px-to-rem(6);
$tablet-padding-right: globalFunctions.px-to-rem(12);
$tablet-padding-bottom: globalFunctions.px-to-rem(9);
$tablet-padding-left: globalFunctions.px-to-rem(12);

$tablet-icon-margin-top: globalFunctions.px-to-rem(1);
$tablet-icon-margin-right: spacing.$spacing-0;
$tablet-icon-margin-bottom: globalFunctions.px-to-rem(4);
$tablet-icon-margin-left: spacing.$spacing-0;

$mobile-padding: globalFunctions.px-to-rem(8);
$mobile-icon-margin: spacing.$spacing-0;

.ontario-back-to-top--default {
	position: fixed;
	bottom: 5%;
	right: 2%;
	visibility: hidden;
	opacity: 0;
	transition: 0.1s ease-in-out;
	display: flex;
	justify-content: center;
	align-items: center;
	height: globalFunctions.px-to-rem(48);
	padding: $default-padding-top $default-padding-right $default-padding-bottom $default-padding-left;
	background: $ontario-colour-back-to-top--default-background;
	border: globalFunctions.px-to-rem(2) solid colours.$ontario-colour-white;
	border-radius: globalVariables.$global-radius;
	box-sizing: border-box;
	box-shadow: 0 globalFunctions.px-to-rem(2) globalFunctions.px-to-rem(4) rgba(colours.$ontario-colour-black, 0.6);
	color: colours.$ontario-colour-black;
	line-height: globalFunctions.px-to-rem(20);
	font-size: fontSizes.$ontario-font-size-standard-body-text;
	font-family: fonts.$ontario-font-open-sans;
	font-weight: fontWeights.$ontario-font-weights-semi-bold;
	z-index: 10000;
	cursor: pointer;

	svg.ontario-icon {
		margin: 0.125rem spacing.$spacing-2 spacing.$spacing-0 spacing.$spacing-0;
		width: globalFunctions.px-to-rem(32);
		height: globalFunctions.px-to-rem(32);
	}

	&:hover {
		background-color: colours.$ontario-greyscale-20;
	}

	&:focus {
		background-color: $ontario-colour-back-to-top--default-background;
		box-shadow: 0 0 0 globalFunctions.px-to-rem(4) colours.$ontario-colour-focus,
			0 globalFunctions.px-to-rem(3) globalFunctions.px-to-rem(5) globalFunctions.px-to-rem(3) rgba(0, 0, 0, 0.6);
		outline: globalFunctions.px-to-rem(4) solid transparent;
		transition: 0.1s ease-in-out;
	}

	&:active {
		background-color: $ontario-colour-back-to-top--active-background;
		box-shadow: 0 0 0 globalFunctions.px-to-rem(4) colours.$ontario-colour-focus,
			0 globalFunctions.px-to-rem(5) globalFunctions.px-to-rem(7) globalFunctions.px-to-rem(3) rgba(0, 0, 0, 0.6);
		outline: globalFunctions.px-to-rem(4) solid transparent;
		transition: background-color 0s, $ontario-focus-transition;
	}

	&:visited {
		color: colours.$ontario-colour-white;
	}

	@media screen and (max-width: breakpoints.$medium-breakpoint) {
		flex-direction: column;
		height: globalFunctions.px-to-rem(76);
		padding: $tablet-padding-top $tablet-padding-right $tablet-padding-bottom $tablet-padding-left;
		svg.ontario-icon {
			margin: $tablet-icon-margin-top $tablet-icon-margin-right $tablet-icon-margin-bottom $tablet-icon-margin-left;
			width: globalFunctions.px-to-rem(32);
			height: globalFunctions.px-to-rem(32);
		}
	}

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		display: block;
		padding: $mobile-padding;
		font-size: 0;
		width: globalFunctions.px-to-rem(48);
		height: globalFunctions.px-to-rem(48);
		svg.ontario-icon {
			margin: $mobile-icon-margin;
			@-moz-document url-prefix() {
				padding: 0 spacing.$spacing-1 spacing.$spacing-1 spacing.$spacing-0;
			}
		}
	}
}

.active {
	visibility: visible;
	opacity: 1;
}
