@import '~modern-normalize/modern-normalize.css';
@import './modern-base.css';
@import '~sass-extras/index';
@import './fonts';
@import './variables';

@media screen and (min-resolution: 2dppx) {
	body {
		-webkit-font-smoothing: antialiased;
	}
}

body {
	background-color: var(--background-color);
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: normal;
	color: var(--text-color2);
	overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
img,
a,
button {
	user-select: none;
	cursor: default;
}

h1 {
	font-size: 1.625rem;
	font-weight: 600;
	line-height: 2rem;
}

h2 {
	font-size: 1.25rem;
	font-weight: normal;
	line-height: 1.75rem;
}

h3 {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25rem;
}

p {
	color: var(--text-color);
	font-size: 1rem;
	line-height: 1.5rem;
	margin-top: 0;
	margin-bottom: 1rem;
}

p.secondary {
	color: var(--text-color2);
	font-size: 0.875rem;
	line-height: 1.375rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: 0;
	margin-bottom: 0.5rem;
}

a {
	position: relative;
	display: inline-block;
	color: var(--primary-color);
	cursor: pointer;
	transition: color 0.2s ease;

	&:hover {
		color: var(--secondary-color);
		text-decoration: none;

		&::after,
		&::before {
			width: 100%;
			left: 0;
		}
	}

	&::after,
	&::before {
		content: '';
		position: absolute;
		top: calc(100% - 2px);
		width: 0;
		right: 0;
		height: 1px;
	}

	&::before {
		transition: width 0.4s cubic-bezier(0.51, 0.18, 0, 0.88) 0.1s;
		background: var(--primary-color);
	}

	&::after {
		transition: width 0.2s cubic-bezier(0.29, 0.18, 0.26, 0.83);
		background: var(--secondary-color);
	}

	&[disabled] {
		color: var(--text-color);
		opacity: 0.3;
		pointer-events: none;
	}
}

p a {
	user-select: unset;
}

hr {
	margin-top: 30px;
	margin-bottom: 30px;
}

button:focus {
	outline: 0;
}

input,
button,
select,
optgroup,
textarea {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

/* Bootstrap overrides */
.form-group {
	margin-bottom: 10px;
}


// Table
table {
	border-spacing: 0;
	width: 100%;
	border-collapse: collapse;
}

td,
th {
	text-align: left;
}

/* Improved scrollbar style on Linux and Windows */
:-webkit-any(.os-linux, .os-win32) {
	::-webkit-scrollbar {
		width: 6px;
	}

	::-webkit-scrollbar-track {
		border-radius: 6px;
		box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
	}

	::-webkit-scrollbar-thumb {
		border-radius: 6px;
		background: rgba(0, 0, 0, 0.16);
		box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
	}

	::-webkit-scrollbar-thumb:hover {
		border-radius: 6px;
		background: rgba(0, 0, 0, 0.2);
		box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
	}

	::-webkit-scrollbar-thumb:active {
		border-radius: 6px; /* This has to be on both :active and :hover too for some weird reason */
		background: rgba(0, 0, 0, 0.3);
		box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3);
	}
}

@keyframes shake {
	from,
	to {
		transform: translate3d(0, 0, 0);
	}

	20%,
	60% {
		transform: translate3d(-5px, 0, 0);
	}

	40%,
	80% {
		transform: translate3d(5px, 0, 0);
	}
}

.shake-animation {
	animation: shake 0.3s ease;
}
