@import "./bootstrap";

[v-cloak] {
	display: none !important;
}

.navbar {
	z-index: 99;

	.navbar-brand {
		color: #2d4a5d;
		transition: all 0.2s;

		img {
			width: 40px;
		}

		@include media-breakpoint-down(md) {
			padding: 0;

			img {
				width: 35px;
			}
		}
	}
}

.navbar-brand {
	span {
		opacity: 0.8;
		transition: all 0.5s;
	}

	&:hover {
		span {
			opacity: 1;
		}
	}
}

.nav-tabs .nav-link {
	@include media-breakpoint-down(xl) {
		padding-left: 10px;
		padding-right: 10px;
	}
}

:not(.text-view) > a:not(.no-icon) {
	&[href^="http://"],
	&[href^="https://"]
	{
		&:after {
			content: "\f1c5";
			display: inline-block;
			font-family: "bootstrap-icons" !important;
			font-style: normal;
			font-weight: normal !important;
			font-variant: normal;
			text-transform: none;
			line-height: 1;
			vertical-align: -0.125em;
			margin-left: 4px;
		}
	}
}

.link {
	@extend a;
	cursor: pointer;
}

.loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.4);
	z-index: 1500;
}

// dark mode adjustments
@include color-mode(dark) {
	.loader {
		background: rgba(0, 0, 0, 0.4);
	}

	.token.tag,
	.token.property {
		color: #ee6969;
	}

	.btn-outline-secondary {
		color: #9c9c9c;

		&:hover {
			color: $body-color-dark;
		}
	}
}

.text-spaces-nowrap {
	white-space: pre;
}

.text-spaces {
	white-space: pre-wrap;
}

#nav-plain-text .text-view,
#nav-source {
	white-space: pre;
	font-family: "Courier New", Courier, System, fixed-width;
	font-size: 0.85em;
}

#nav-html-source pre[class*="language-"] code {
	white-space: pre-wrap;
}

#nav-plain-text .text-view {
	white-space: pre-wrap;
}

.messageHeaders {
	margin: 15px 0 0;

	th {
		padding-right: 1.5rem;
		font-weight: normal;
		vertical-align: top;
		min-width: 120px;
	}

	td {
		vertical-align: top;
	}
}

#nav-html {
	@include media-breakpoint-up(md) {
		padding-right: 1.5rem;
	}
}

#preview-html {
	min-height: 300px;

	&.tablet,
	&.phone {
		border: solid $gray-300 1px;
	}
}

#responsive-view {
	margin: auto;
	transition: width 0.5s;
	position: relative;

	&.tablet,
	&.phone {
		border-radius: 35px;
		box-sizing: content-box;
		padding-bottom: 76px;
		padding-top: 54px;
		padding-left: 10px;
		padding-right: 10px;
		background: $gray-800;

		iframe {
			height: 100% !important;
			background: #fff;
		}
	}

	&.phone {
		&::before {
			border-radius: 5px;
			background: $gray-600;
			top: 22px;
			content: "";
			display: block;
			height: 10px;
			left: 50%;
			position: absolute;
			transform: translateX(-50%);
			width: 80px;
		}

		&::after {
			border-radius: 20px;
			background: $gray-900;
			bottom: 20px;
			content: "";
			display: block;
			width: 65px;
			height: 40px;
			left: 50%;
			position: absolute;
			transform: translateX(-50%);
		}
	}

	&.tablet {
		&::before {
			border-radius: 50%;
			border: solid #b5b0b0 2px;
			top: 22px;
			content: "";
			display: block;
			width: 10px;
			height: 10px;
			left: 50%;
			position: absolute;
			transform: translateX(-50%);
		}

		&::after {
			border-radius: 50%;
			border: solid #b5b0b0 2px;
			bottom: 23px;
			content: "";
			display: block;
			width: 30px;
			height: 30px;
			left: 50%;
			position: absolute;
			transform: translateX(-50%);
		}
	}
}

.messageHeaders {
	th {
		vertical-align: top;
	}
}

#message-page,
#MessageList {
	.list-group-item.message:first-child {
		border-top: 0;
	}

	.message:not(.active) {
		b {
			color: $list-group-color;
		}

		&.read {
			color: $text-muted;

			> div {
				opacity: 0.5;
			}

			b {
				color: $list-group-color;
			}
		}
		&.selected {
			background: var(--bs-primary-bg-subtle);
		}
	}
}

body.blur {
	.privacy {
		filter: blur(3px);
	}
}

.card.attachment {
	color: $gray-800;

	.icon {
		position: absolute;
		top: 18px;
		left: 0;
		right: 0;
		font-size: 3.5rem;
		text-align: center;
		color: $gray-300;
	}

	.card-body {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		overflow: hidden;
		opacity: 0;
	}

	.card-footer {
		background: $gray-300;

		.bi {
			font-size: 1.3em;
			margin-left: -10px;
		}
	}

	&:hover {
		.card-body {
			opacity: 1;
			background: $gray-300;
		}
	}
}

.form-select.tag-selector {
	display: none;
}

.message {
	&.read {
		> div {
			opacity: 0.7;
		}
	}
}

#message-view {
	.form-control.dropdown {
		padding: 0;
		border: 0;

		input {
			font-size: 0.875em;
		}

		div {
			cursor: text; // html5-tags
		}
	}
}

.dropdown-menu.checks {
	.dropdown-item {
		min-width: 190px;
	}
}

// bootstrap5-tags
.tags-badge {
	display: flex;
}

#DownloadBtn {
	@include media-breakpoint-down(sm) {
		position: static;

		.dropdown-menu {
			left: 0;
			right: 0;
		}
	}
}

// HighlightJS for HTML rendering
@import "highlight.js/styles/github.css";

@include color-mode(dark) {
	@import "highlight.js/scss/github-dark";

	.hljs {
		background: transparent;
	}
}

code[class*="language-"],
pre[class*="language-"] {
	font-size: 0.85em;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;
	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}
pre[class*="language-"] {
	position: relative;
	overflow: visible;
}
pre[class*="language-"] > code {
	position: relative;
	z-index: 1;
}
code[class*="language-"] {
	max-height: inherit;
	height: inherit;
	padding: 0 1em;
	display: block;
	overflow: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	// background-color: #fdfdfd;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin-bottom: 1em;
}
:not(pre) > code[class*="language-"] {
	position: relative;
	padding: 0.2em;
	border-radius: 0.3em;
	color: #c92c2c;
	border: 1px solid rgba(0, 0, 0, 0.1);
	display: inline;
	white-space: normal;
}

@media screen and (max-width: 767px) {
	pre[class*="language-"]::after,
	pre[class*="language-"]::before {
		bottom: 14px;
		box-shadow: none;
	}
}
