@import "mixin";

/* Avatar/Icon loading animations */
.icon_loading {
	border: 2px solid #f3f3f3; /* Light grey */
	border-top: 2px solid #3498db; /* Blue */
	border-radius: 50%;
	animation: loading_spin 2s linear infinite;

	width: 14px !important;
	height: 14px !important;
}

.avatar_loading {
	border: 2px solid #f3f3f3; /* Light grey */
	border-top: 2px solid #3498db; /* Blue */
	border-radius: 50%;
	animation: loading_spin 2s linear infinite;

	width: 14px !important;
	height: 14px !important;
}

@keyframes loading_spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@viewport {
	width: device-width;
	user-zoom: fixed;
}

/* Some general style settings (from bootstrap) */
:root {
	--blue: #2196f3;
	--indigo: #3f51b5;
	--purple: #9c27b0;
	--pink: #e91e63;
	--red: #f44336;
	--orange: #ff9800;
	--yellow: #ffeb3b;
	--green: #4caf50;
	--teal: #009688;
	--cyan: #00bcd4;
	--white: #fff;
	--gray: #6c757d;
	--gray-dark: #343a40;
	--primary: #009688;
	--secondary: #6c757d;
	--success: #4caf50;
	--info: #03a9f4;
	--warning: #ff5722;
	--danger: #f44336;
	--light: #f5f5f5;
	--dark: #424242;
	--breakpoint-xs: 0;
	--breakpoint-sm: 576px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 992px;
	--breakpoint-xl: 1200px;
	--font-family-sans-serif: "Roboto", "Helvetica", "Arial", sans-serif;
	--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*, :before, :after {
	box-sizing: border-box;
	outline: none;
}

html {
	font-family: sans-serif;
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-ms-overflow-style: scrollbar;
	-webkit-tap-highlight-color: transparent;
	background-color: gray;
}
body {
	height: 100vh;
	width: 100vw;
	top: 0;
	left: 0;
	right: 0;
	padding: 0;
	margin: 0;


	font-family: Roboto, Helvetica, Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.5;
	color: #212529;
	text-align: left;
	background-color: #fafafa;

	font-weight: 400;
}

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


fieldset {
	border: unset;
	display: unset;
}

code {
	background-color: lightgray;
	padding: 2px;
}


/* bootstrap materialize fix */
.form-row {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* New design */
a[href] {
	color: #4d7bff;
	text-decoration: none;

	&:hover {
		color: #8aa8ff;
	}

	&:visited {
		color: #2752cd;
	}
}

/* code hightliting */
.tag-hljs-inline-code, .tag-hljs-code {
	display: block;
	margin: 3px;

	font-size: 80%;
	border-radius: .2em;
	font-family: Monaco, Menlo, Consolas, "Roboto Mono", "Andale Mono", "Ubuntu Mono", monospace;
	box-decoration-break: clone;

	&.tag-hljs-inline-code {
		display: inline-block;

		> .hljs {
			padding: 0 .25em!important;
		}

		white-space: pre-wrap;
		margin: 0 0 -0.1em;
		vertical-align: bottom;
	}
	&.tag-hljs-code {
		word-wrap: normal;
	}

	code {
		@include chat-scrollbar-horizontal();
	}
}

/* fix tailing new line after code blocks */
.message > {
	.tag-hljs-code + br {
		display: none;
	}
}

/* tooltip */
#global-tooltip {
	color: #999999;
	background-color: #232222;

	position: fixed;
	z-index: 1000000;

	pointer-events: none;

	padding: .25em;
	transform: translate(-50%, -100%); /* translate up, center */

	text-align: center;
	border-right: 3px;

	display: flex;
	flex-direction: column;
	justify-content: space-around;

	opacity: 0;
	@include transition(opacity .5s ease-in-out);

	&:after {
		content: '';
		position: absolute;

		width: 0;
		height: 0;

		left: calc(50% - .5em);
		bottom: -.4em;

		border-style: solid;
		border-width: .5em .5em 0 .5em;
		border-color: #232222 transparent transparent transparent;
	}

	&.shown {
		opacity: 1;
	}
}

/* colored letters */
a.rainbow-letter {
	background-image: url('data:img/png;base64,[encoded data, 7584 characters]');
	background-size: 100% 100%;

	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;

	font-weight: bold;
	border-bottom: 1px solid #ab4788;
	line-height: 1em;
}