@use 'variables' as *;

@font-face {
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 100 1000;
	font-display: swap;
	src: url('@/fonts/dm-sans-latin-variable.woff2') format('woff2-variations');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 100 1000;
	font-display: swap;
	src: url('@/fonts/dm-sans-latin-ext-variable.woff2') format('woff2-variations');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

body.simplestats-pages-body {
	background-color: #F4F3EE;
}

.simplestats-app {
	margin-left: -20px;
	font-family: 'DM Sans', Inter, Helvetica, Arial, sans-serif;
	color: #393F4C;
	background-color: #F4F3EE;
}

.simplestats-app * {
	box-sizing: border-box;
}

.simplestats-app-container {
	padding: 32px;
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
}

.simplestats-primary-button {
	text-decoration: none;
	background-color: $primary-button-bg;
	border-radius: 3px;
	color: #fff;
	font-size: 14px;
	padding: 6px 11px;
	display: inline-block;
	border: 1px solid $primary-button-bg;

	&:hover, &:focus {
		color: #fff;
	}
}

.simplestats-secondary-button {
	text-decoration: none;
	background-color: #fff;
	color: $primary-button-bg;
	display: inline-block;
	border: 1px solid $primary-button-bg;
	display: inline-block;
	font-size: 14px;
	padding: 6px 11px;
	border-radius: 3px;

	&:hover, &:focus {
		color: $primary-button-bg;
	}
}

.simplestats-mt-20 {
	margin-top: 20px;
}
