@use "sass:map";
@use "sass:math";
@use "@angular/material" as mat;
@use "../../theme/global" as global;

.buttonDownload {
	width: global.$spacing * 20;
	display: flex;
	justify-content: flex-start;
	padding: global.$spacing calc(global.$spacing * 1.5);
	height: auto !important;
	border-radius: global.$spacing !important;
	border-style: solid;
	border-width: 2px;
	text-transform: none !important;
	color: inherit !important;
	border-color: inherit !important;
	background-color: inherit;

	&:hover {
		.textGras {
			text-decoration: underline;
		}
	}

	.iconPrincipal {
		width: global.$spacing * 4;
		height: global.$spacing * 4;
		font-size: global.$spacing * 4;
	}
	.arrow-outward {
		font-size: global.$spacing * 2;
		width: global.$spacing * 2;
		height: global.$spacing * 2;
	}

	.text-transparent {
		display: flex;
		justify-content: flex-start;
		font-size: 11px;
		font-weight: 300;
		line-height: 16px;
		letter-spacing: .5px;
	}

	.textInApp {
		display: flex;
		gap: 8px;
		align-items: center;
		font-size: 11px;
		font-weight: 500;
		line-height: 16px;
		letter-spacing: .5px;
	}

	.external {
		font-size: 1.2em;
		display: flex;
		align-items: center;
	}

	.cdk-visually-hidden {
		border: 0;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
		white-space: nowrap;
		outline: 0;
		-webkit-appearance: none;
		-moz-appearance: none;
		left: 0;
	}
}


@mixin override-color($theme) {
	$-theme: map.get($theme, theme);
	$color-config: mat.get-color-config($theme);
	$primary-palette: map.get($color-config, "primary");
	$foreground: map.get($theme, foreground);

	.buttonDownload {
		&:hover {
			.arrow-outward {
				color: map.get($primary-palette, default);
			}
		}
	}
}