@use "sass:math";
@use "sass:meta";
@use "@angular/material" as mat;
@use "@metromobilite/m-ui/theme/global";
@use "@metromobilite/m-ui/theme/themes";

@mixin override-color($theme) {
}

.theme-button {
	border: none;
	user-select: none;
	cursor: pointer;
	box-sizing: border-box;
	border-radius: global.$button-radius * 2;
	padding: global.$spacing * 1.5 global.$spacing * 2.5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	position: relative;
	z-index: 1001;
	@include mat.elevation(0);
	transition: all 330ms ease-in-out;
	text-transform: uppercase;
	font-weight: 500;
	font-family: Roboto, "Helvetica Neue", sans-serif;
	font-size: global.$default-fz;

	&:focus {
		outline: none;
		@include mat.elevation(4);
	}

	mat-icon {
		position: absolute;
		top: 50%;
		right: global.$spacing + 24px;
		transform: translate(100%, -50%);

		&::before {
			content: "";
			position: absolute;
			width: 125%;
			height: 125%;
			border-radius: 50%;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: -1;
		}
	}

	body.dark-theme & {
		background: dark-color-overlay(2);
		color: map-get($dark-theme-foreground, text);

		.mat-icon {
			color: dark-color-overlay(2);

			&::before {
				background: map-get($dark-accent, default);
			}
		}
	}
	body.light-theme & {
		background: map-get($light-theme-background, content);

		.mat-icon {
			color: map-get($light-theme-background, content);

			&::before {
				background: map-get($light-accent, default);
			}
		}
	}
}

@keyframes mega-ripple {
	0% {
		transform: translate(-50%, -50%) scale(0);
		opacity: 1;
	}
	50% {
		transform: translate(-50%, -50%) scale(2.8);
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

.mega-ripple-container {
	position: fixed;
	z-index: 1000;
	width: 100%;
	height: 100%;
	overflow: hidden;
	top: 0;
	left: 0;

	.mega-ripple {
		position: absolute;
		width: 100vh;
		height: 100vh;
		border-radius: 50%;
		opacity: 0;
		transform: translate(-50%, -50%) scale(2.8);

		&.animate {
			animation: mega-ripple 1000ms 1ms linear forwards;
		}

		&.dark {
			background: map-get($light-theme-background, background);
		}
		&.light {
			background: dark-color-overlay(2);
		}

		@media screen and (min-width: $mpwa-breakpoint) {
			width: 100vw;
			height: 100vw;
		}
	}
}