@import "variables.less";
@import "mixins.less";

html {
	min-height: 100%;
}

body {
	height: 100%;
	 // The html and body elements cannot have any padding or margin.
	margin: 0px;
	padding: 0px !important;
}

html,
body {
	overflow-x: hidden;  //Prevent scroll on narrow devices
}

.hide-form-sidebar {
	.form-sidebar {
		display: none !important;
	}
}

.sidebar-padding {
	padding: 12px 14px;
}

body[data-route=""] .main-menu,
body[data-route="desk"] .main-menu {
	.desk-sidebar {
		display: block !important;
	}

	.hide-form-sidebar;
}

body[data-route^="List"] .main-menu {
	.list-sidebar {
		display: block !important;
	}

	.hide-form-sidebar;
}

body[data-route^="Module"] .main-menu {
	.module-sidebar {
		display: block !important;
	}

	.hide-form-sidebar;
}

.layout-side-section {
	font-size: @text-medium;

	padding-right: 0px;

	> .divider {
		display: none !important;
	}

	.sidebar-menu > li > a {
		display: inline-block;
	}

	.sidebar-menu {
		padding: 15px 0px 5px 0px;
		margin: 0px;
	}
}

.layout-side-section .sidebar-menu > li > a& {
	&:hover,
	&:focus,
	&:active {
		.underline-hover;
	}
}

.sidebar-menu {
	.badge {
		position: absolute;
		font-weight: normal;
		right: 0px;
		top: 0px;
		padding-bottom: 4px;
	}

	.octicon {
		font-size: 12px;
	}

	h6, .h6 {
		margin-top: 0px;
		margin-bottom: 7px;
	}

	> li {
		position: relative;
	}

	.list-link {
		margin: 7px 0px;
	}
}

// form sidebar
.form-sidebar {
	.form-tags {
		.tag-area {
			margin-top: -3px;
			margin-left: -4px;
		}

		input {
			color: @text-color !important;
			font-style: italic;
		}

		.tagit-new {
			clear: both;
			margin-top: 2px;
			margin-bottom: -1px;
		}
	}


	a.close {
		position: absolute;
		right: 5px;
	}


	.form-shared, .form-viewers {
		.share-doc-btn {
			cursor: pointer;
		}

		.octicon {
			position: relative;
			left: 4.5px;
		}

		.avatar {
			margin-top: 5px;
		}

		.shared-with-everyone {
			border-style: solid;
			border-color: @btn-bg;
			background-color: @btn-bg;

			.octicon {
				color: @text-color !important;
			}
		}
	}

	.liked-by {
		margin-left: -4px;
	}

	.liked-by .octicon-heart {
		font-size: 16px;
		cursor: pointer;
	}

	.sidebar-image-section {
		cursor: pointer;

		.sidebar-image {
			width: 100%;
			height: 0;
			padding-bottom: 100%;
			border-radius: 6px;
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
		}

		.standard-image {
			font-size: 72px;
			border-radius: 6px;
		}

		.sidebar-image-wrapper {
			position: relative;
		}

		.sidebar-image, .sidebar-standard-image {
			transition: opacity 0.3s;
		}

		.sidebar-image-wrapper:hover {
			.sidebar-image, .sidebar-standard-image {
				opacity: 0.5;
			}
			.sidebar-image-actions {
				display: block;
			}
		}

		.sidebar-image-actions {
			display: none;
			position: absolute;
			top: 50%;
			right: 0;
			left: 0;
			transform: translateY(-50%);
			text-align: center;
			z-index: 1;
		}

	}
}

.form-sidebar .form-shared .share-doc-btn, .btn-add-review {
	&:hover,
	&:focus,
	&:active {
		background-color: @btn-bg;

		.octicon-plus {
			color: @text-color !important;
		}
	}
}

.sidebar-left .form-sidebar {
	.form-tags,
	.assignment-row,
	.form-shared,
	.liked-by,
	.modified-by,
	.created-by,
	.tags-label,
	.shared-with-label,
	.form-viewers,
	.viewers-label {
		.sidebar-padding;
	}

	.assigned-to-label,
	.attachments-label,
	.tags-label,
	.shared-with-label,
	.viewers-label {
		.sidebar-padding;
		margin-bottom: 0px;
	}

	.assigned-to-label,
	.tags-label,
	.attachments-label.has-attachments,
	.shared-with-label,
	.viewers-label {
		padding-bottom: 0px;
	}

	a.close {
		right: 5px;
	}

	.assignment-row a.close {
		margin-top: -12px;
	}

	.attachment-row {
		margin-bottom: 4px;
	}
}

.layout-side-section .form-sidebar {
	.modified-by {
		margin-bottom: 15px;
	}
}

.layout-side-section {

	.overlay-sidebar {
		@media (max-width: 991px) {
			margin-top: 0 !important;
			position: fixed;
			background: white;
			top: 0;
			left: 0;
			transform: translateX(-110%);
			z-index: 9999;
			box-shadow: 5px 0 25px 0px rgba(0,0,0,0.3);
			height: 100%;
			width: 40%;
			display: block !important;
			transition: transform 200ms ease-in-out;

			&.opened {
				transform: translateX(0);
				overflow-y: auto;
			}

			.divider {
				height: 1px;
				background-color: #d8dfe5;
				opacity: 0.7;
			}

			li:not(.divider):not(.tagit-new):not(.module-sidebar-item) {
				padding: 10px 15px;
			}

			.modified-by, .created-by {
				margin: 0;
			}

			.badge {
				top: 9px;
				right: 15px;
			}

			.reports-dropdown {
				margin-top: 10px;
				margin-bottom: -10px;

				li:not(.divider) {
					padding: 12.5px 0 !important;
				}

				li.divider {
					height: 0;
				}
			}

			.sidebar-menu {
				padding: 2px 0px 5px 0px;
			}
		}

		@media (max-width: 767px) {
			width: 70%;
		}
	}

	div.close-sidebar {
		position: fixed;
		top: 0;
		right: 0;
		opacity: 0.3;
		background: #000;
		z-index: 1041;
		height: 100%;
		width: 100%;
	}

	.sidebar-menu {
		@media (max-width: 991px) {
			margin: 0;
		}
	}

	.module-sidebar-nav {
		@media (max-width: 991px) {
			padding-left: 0;
			padding-right: 0;

			.module-link {
				padding: 15px 15px 15px 25px;
			}
		}
	}
}
.overlay-sidebar {
	ul.dropdown-menu {
		li {
			padding:0 !important;
		}

		.badge {
			top: 0;
			right: 0;
		}
	}
}


.list-sidebar {
	.list-sidebar-label {
		color: @text-muted;
		text-transform: uppercase;
		margin-bottom: 0;
		font-size: @text-small;
	}

	.group-by-count {
		position:relative
	}

	.group-by-dropdown, .list-stats-dropdown {
		max-height: 300px;
		overflow-y: auto;
		max-width: 250px;
	}
	.dropdown-search {
		padding: 8px;
	}
}

// module sidebar
.layout-side-section .module-sidebar-nav {
	margin-top: 15px;
}

.assignment-row {
	margin-bottom: 5px;
}

.review-list {
	display: flex;
	flex-wrap: wrap;

	.btn-add-review {
		cursor: pointer;

		.octicon {
			position: relative;
			left: 4.5px;
		}
	}

	.review-pill {
		width: 50px;
		border: 1px solid @border-color;
		border-radius: 4px;
		display: flex;
		margin: 0 10px 10px 0;
		.avatar {
			padding: 0px;
			margin: 0px;
			.avatar-frame {
				border-radius: 3px 0 0 3px;
			}
		}
		.standard-image {
			border-left: 0;
		}
		span:nth-child(2) {
			flex-basis: 50%;
			text-align: center;
			align-self: center;
			font-size: @text-small;
		}
		cursor: pointer;
	}
}

.review-popover  {
	max-width: 150px;

	.popover-content {
		padding: 0;
	}
	.subject {
		border-bottom: 1px solid @border-color;
	}
	.subject, .body {
		padding: 12px;
		overflow-wrap: break-word;
	}
}

@media screen and (min-width: @screen-md) {
	.reports-dropdown {
		max-height: 300px;
		overflow-y: auto;
	}
}