@use './typography' as typography;
@use './media';
@use './variables';

html {
	scroll-behavior: smooth;

	&::-webkit-scrollbar {
		width: 0;
		opacity: 0;
		display: none;
	}
}

body {
	color: #989898;
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	position: relative;
	overflow-x: hidden !important;
	-webkit-tap-highlight-color: transparent;

	@include typography.P1;
}

.container {
	width: 1222px;
	margin: auto;

	@include media.breakpoint-down('deskS') {
		width: 928px;
	}

	@include media.breakpoint-down('tabM') {
		width: 100%;
		padding-inline: 48px;
	}

	@include media.breakpoint-down('mobM') {
		padding-inline-start: 16px;
		padding-inline-end: 15px;
	}
}

.textAnimation {
	opacity: 0;
	transition: 1.5s variables.$transition-type;
	transform: translate3d(0, 50px, 0);
}
.textActive {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

a {
	text-decoration: none;
	color: #989898;
}

h1 {
	margin-bottom: 16px;
	@include typography.H1;
}
h2 {
	color: #e3e3e3;
	@include typography.H2;
}
h3 {
	@include typography.H3;
}
h4 {
	@include typography.H4;
}
h5 {
	@include typography.H5;
}
h6 {
	@include typography.H6;
}
p {
	@include typography.P1;
}

[dir='rtl'] {
	.ltr-number {
		unicode-bidi: embed;
		direction: ltr;
		display: inline-block;
	}

	[class*='Value'],
	[class*='Price'],
	[class*='Profit'],
	[class*='advantageTitle'],
	[class*='buttonTitle'],
	[class*='affiliateValue'],
	[class*='affiliateCardTitleProfit'] {
		unicode-bidi: embed;
		direction: ltr;
		display: inline-block;
	}
}