//
// Page - Inbox
// Pages SASS files are compiled into separate css files
//



// Global config
@import "../../config";

// Layout config
@import "../../global/layout/config.scss";

// Config for aside
$kt-todo-aside-config: (
	offcanvas: (
		layout: (
			self: (
				zindex: 1001,
				width: 300px
			),
			close: (
				size: 25px,
				font-size: 1.4rem
			)
		),
		skin: (
			overlay: (
				bg-color: rgba(#000000, 0.05)
			),
			close: (
				bg-color: (
					default: kt-base-color(grey, 1),
					hover: transparent
				),
				icon-color: (
					default: kt-base-color(label, 2),
					hover: kt-brand-color()
				)
			)
		)
	)
);

$kt-todo-icon-color: #8e96b8;
$kt-todo-hover-bg: #f2f3f7;

// Base
.kt-todo {
	// Content
	.kt-todo__content {
		width: 100%;
	}

	// Aside
	.kt-todo__aside {
		padding: 20px;
		width: 275px;

		@include kt-desktop {
			margin-right: kt-get($kt-page-padding, desktop);
		}

		.kt-todo__nav {
			.kt-nav {
				.kt-nav__item {
					margin-bottom: 0.5rem;

          .kt-nav__link-title {
            padding-left: 1.9rem;
            font-weight: 600;
						color: kt-base-color(label, 4);
            font-size: 1.1rem;
            padding-left: 1.9rem;
            font-weight: 600;
						color: kt-base-color(label, 4);
            font-size: 1.1rem;
          }

					.kt-nav__link {
						padding: 0.6rem 20px;

						@include kt-rounded {
							border-radius: $kt-border-radius;
						}

						i {
							color: $kt-todo-icon-color;
						}

						@include kt-svg-icon-color($kt-todo-icon-color);

						.kt-nav__link-icon {
							text-align: center;
							margin: 0 0.7rem 0 -0.23rem;

              &.kt-nav__link-icon--size {
                font-size: 0.9rem;
                color: #93a2dd;
              }
						}

            svg {
              width: 20px;
              height: 20px;
            }

            g [fill] {
              fill: #93a2dd;
            }

						.kt-nav__link-text {
							font-weight: 500;
							color: kt-base-color(label, 3);
						}
					}

					&:last-child {
						margin-bottom: 0;

						.kt-nav__link {
							.kt-nav__link-icon {
								font-size: 0.9rem;
							}
						}
					}

					&.hover,
					&.kt-nav__item--selected,
					&.kt-nav__item--active {

						.kt-nav__link {
							background-color: kt-base-color(grey, 1);

							@include kt-rounded {
								border-radius: $kt-border-radius;
							}

							i {
								color: kt-brand-color();
							}

							@include kt-svg-icon-color(kt-brand-color());

							.kt-nav__link-text {
								color: kt-brand-color();
							}
						}
					}
				}
			}
		}
	}

  	// Header
  	.kt-todo__header {
	  	padding: 13px 25px;
	  	display: flex;
	  	flex-wrap: wrap;
	  	align-items: center;
	  	width: 100%;

	  	.kt-todo__title {
	    	margin: 0;
	    	font-size: 1.4rem;
	    	padding-right: 2rem;
	    	font-weight: 600;
	    	color: kt-base-color(label, 3);
	  	}

		// Nav
    	.kt-todo__nav {
				padding: 0;
		  	flex-grow: 1;
		  	margin-top: 0.2rem;

				.btn {
					margin-right: 1rem;
				}

      		.kt-todo__link {
				    padding: 0.5rem 1.2rem;
				    font-weight: 500;
				    color: kt-base-color(label, 2);

						&:not(:first-child):not(:last-child) {
							margin: 0 0.2rem;
						}

				    &:hover,
				    &.kt-todo__link--selected,
				    &.kt-todo__link--active {
				      	background-color: kt-base-color(grey, 1);
				      	color: kt-brand-color();

			      		@include kt-rounded {
			        		border-radius: $kt-border-radius;
			      		}
			    	}

      			@include kt-rounded {
          			border-radius: $kt-border-radius;
        		}
      		}
		}

		// Users
    	.kt-todo__users {
				line-height: 0;
			  	display: flex;
			  	align-items: center;

	      		.kt-media {
	        		position: relative;
	        		z-index: 0;

	        		&:not(:first-child):not(:last-child) {
	          			margin-left: -0.1rem;
	        		}
	      		}
	    	}

			@include kt-tablet-and-mobile {
				padding: 10px 15px;
			}
  	}

	// Icon
	.kt-todo__icon {
		@include kt-btn-reset();
		display: flex;
		justify-content: center;
		align-items: center;
		height: 35px;
		width: 35px;
		background-color: kt-base-color(grey, 1);
		transition: all 0.3s ease;
		cursor: pointer;
		margin: 0;
		border-radius: 0;

		i {
			font-size: 1.1rem;
		}

		&.kt-todo__icon--sm {
			height: 26px;
			width: 26px;

			i {
				font-size: 0.8rem;
			}
		}

		&.kt-todo__icon--md {
			height: 30px;
			width: 30px;

			i {
				font-size: 1rem;
			}
		}

		&.kt-todo__icon--light {
			background-color: transparent;
		}

		@include kt-rounded {
			border-radius: $kt-border-radius;
		}

		i {
			color: $kt-todo-icon-color;
		}

		@include kt-svg-icon-color($kt-todo-icon-color);

		&.kt-todo__icon--active,
		&:hover {
			transition: all 0.3s ease;
			background-color: kt-base-color(grey, 2);

			&.kt-todo__icon--light {
				background-color: transparent;
			}

			i {
				color: kt-brand-color();
			}

			@include kt-svg-icon-color(kt-brand-color());
		}

		// Back
		&.kt-todo__icon--back {
			background-color: transparent;

			i {
				color: $kt-todo-icon-color;
				font-size: 1.5rem;
			}

			@include kt-svg-icon-color($kt-todo-icon-color);

			svg {
				height: 32px;
				width: 32px;
			}

			&:hover {
				background-color: transparent;

				i {
					color: kt-brand-color();
				}

				@include kt-svg-icon-color(kt-brand-color());
			}
		}
	}

	// List
	.kt-todo__list {
		display: none;
		padding: 0;

		// Toolbar
		.kt-todo__toolbar {
			position: relative;
			display: flex;
			flex-grow: 1;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 17px 0;

			.kt-todo__actions {
				display: flex;
				align-items: center;
				margin-right: 1rem;

				.kt-todo__check {
					display: flex;
					align-items: center;

					.kt-checkbox {
						margin: 0;
						padding-left: 0;
					}

					.kt-todo__icon {
						margin-left: 0;
					}
				}

				.kt-todo__panel {
					display: none;
					flex-wrap: wrap;
				}

				.btn {
					padding: 0.6rem 1rem;
				}

				&.kt-todo__actions--expanded {
					.kt-todo__panel {
						display: flex;
					}
				}

				.kt-todo__icon {
					margin-right: 0.5rem;

					&.kt-todo__icon--back {
						margin-right: 2.5rem;
					}
				}
			}

			.kt-todo__controls {
				display: flex;
				align-items: center;
				margin: 0.4rem 0;

				.kt-todo__icon {
					margin-left: 0.5rem;
				}


				.kt-todo__sort {
					margin-left: 0.5rem;
				}

				.kt-todo__pages {
					.kt-todo__perpage {
						color: kt-base-color(label, 2);
						font-size: 1rem;
						font-weight: 500;
						margin-right: 1rem;
						cursor: pointer;
						transition: all 0.3s ease;
						padding: 0.5rem 0;

						&:hover {
							transition: all 0.3s ease;
							color: kt-brand-color();
						}
					}
				}
			}

			.kt-todo__sep {
				display: flex;
				height: 1rem;
				width: 1rem;
			}

			//kt-media-breakpoint(lg),
			@include kt-media-below(1450px) {
				position: static;
				padding: 15px 0;

				.kt-todo__controls {
					margin-bottom: 10px;
				}

				&.kt-todo__toolbar--extended {
					.kt-todo__actions {
						order: 2;
						margin-bottom: 10px;
						justify-content: flex-first;
					}

					.kt-todo__controls {
						order: 2;
						margin-bottom: 3px;
						justify-content: flex-end;
					}
				}
			}
		}

		&.kt-todo__list--shown {
			display: flex;
		}

		// Body
		.kt-todo__body {
			.kt-todo__items {
				padding: 0;

				.kt-todo__item {
					display: flex;
					padding: 12px kt-get($kt-portlet, space, desktop);
					transition: all 0.3s ease;
					cursor: pointer;

					.kt-todo__info {
						display: flex;

						@include kt-hack-ie  {
							 padding: 8px 0;
						}

						@include kt-hack-ie  {
							 min-width: 210px;
						}

						.kt-todo__actions {
							display: flex;
							margin: 0.3rem 10px 0 0;
							align-items: center;

							@include kt-hack-ie  {
								 min-width: 70px;
							}

							.kt-checkbox {
								margin: 0;
								padding: 0;
								margin-right: 10px;
							}

							.kt-todo__icon {
								height: 22px;
								width: 22px;

								i {
									font-size: 1rem;
									color: kt-base-color(grey, 2);
								}

								&:hover {
									i {
										color: rgba(kt-state-color(warning), 0.5) !important;
									}
								}

								&.kt-todo__icon--on {
									i {
										color: kt-state-color(warning) !important;
									}
								}
							}
						}

						.kt-todo__sender {
							display: flex;
							align-items: center;
							margin-right: 30px;
							width: 175px;

							@include kt-hack-ie  {
								 min-width: 175px;
							}

							.kt-media {
								margin-right: 10px;
								min-width: 30px !important;

								span {
									min-width: 30px !important;
								}
							}

							.kt-todo__author {
								font-size: 1rem;
								color: kt-base-color(label, 3);
								font-weight: 500;
							}

							@include kt-media-below(1400px) {
								display: block;
								width: 70px;
								margin-right: 10px;

								.kt-todo__author {
									display: block;
								}

								.kt-media {
									margin-bottom: 5px;
								}
							}
						}
					}

					.kt-todo__details {
						flex-grow: 1;
						margin-top: 5px;

						@include kt-hack-ie  {
	  						width: 0;
								height: 0;
						}

						.kt-todo__message {
							.kt-todo__subject {
								font-size: 1rem;
								color: kt-base-color(label, 3);
								font-weight: 600;
							}

							.kt-todo__summary {
								font-size: 1rem;
								color: kt-base-color(label, 1);
								font-weight: 400;
								text-overflow: ellipsis;
							}
						}

						.kt-todo__labels {
							display: flex;
							margin-top: 5px;

							.kt-todo__label {
								margin-right: 5px;
							}
						}
					}

					.kt-todo__datetime {
						font-size: 1rem;
						color: kt-base-color(label, 1);
						font-weight: 400;
						margin-right: 1rem;
						margin-top: 5px;
						width: 85px;
						text-align: right;

						@include kt-media-below(1400px) {
							width: 70px;
						}
					}

					&:hover,
					&.kt-todo__item--selected {
						transition: all 0.3s ease;
						background-color: $kt-todo-hover-bg;

						.kt-todo__info {
							.kt-todo__actions {
								.kt-todo__icon {
									i {
										font-size: 1rem;
										color: kt-base-color(grey, 3);
									}
								}
							}
						}
					}

					&.kt-todo__item--unread {
						.kt-todo__sender {
							.kt-todo__author {
								color: kt-base-color(label, 4);
								font-weight: 600;
							}
						}

						.kt-todo__details {
							.kt-todo__message {
								.kt-todo__subject {
									color: kt-base-color(label, 3);
									font-weight: 600;
								}
							}
						}

						.kt-todo__datetime {
							color: kt-base-color(label, 4);
							font-weight: 600;
						}
					}
				}

				// Item types
				&[data-type="inbox"] {
					.kt-todo__item[data-type="inbox"] {
						display: flex;
					}
				}

				&[data-type="marked"] {
					.kt-todo__item[data-type="marked"] {
						display: flex;
					}
				}

				&[data-type="draft"] {
					.kt-todo__item[data-type="draft"] {
						display: flex;
					}
				}

				&[data-type="sent"] {
					.kt-todo__item[data-type="sent"] {
						display: flex;
					}
				}

				&[data-type="trash"] {
					.kt-todo__item[data-type="trash"] {
						display: flex;
					}
				}
			}
		}

		// Foot
		.kt-todo__foot {
			.kt-todo__toolbar {
				float: right;
			}

			padding: 0 kt-get($kt-portlet, space, desktop);
		}
	}

	// View
	.kt-todo__view {
		padding: 0;

		// Head
		.kt-todo__head {
			padding: 15px 0 0 0;
			width: 100%;

			// toolbar
			.kt-todo__toolbar {
				cursor: pointer;
				padding: 0;
				width: 100%;
				display: flex;
  				flex-wrap: wrap;

				.kt-todo__info {
					display: flex;
					align-items: center;
					flex-grow: 1;

					.kt-media {
						margin-right: 0.7rem;
					}

					.kt-todo__name {
						color: kt-base-color(label, 4);
						font-weight: 600;
						font-size: 1.1rem;
						padding-right: 0.5rem;

						&:hover {
			        color: kt-brand-color();
			        transition: all 0.3s ease;
			      }
					}
				}

				.kt-todo__details {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					padding: 0.5rem 0;

					.kt-todo__icon {
						margin-right: 0.5rem;
						font-size: 0.7rem;
						color: kt-brand-color();
					}

					.kt-todo__desc {
						color: kt-base-color(label, 2);
						font-weight: 400;
						font-size: 1rem;
					}

					.btn {
						padding: 0.6rem 1rem;

						&:last-child {
							margin-left: 0.5rem;
						}
					}
				}

				.kt-todo__actions {
					display: flex;
					align-items: center;

					.kt-todo__datetime {
						color: kt-base-color(label, 1);
						font-weight: 500;
						font-size: 1rem;
						margin-right: 1.5rem;
					}
				}
			}
		}

		// Shown
		&.kt-todo__view--shown {
			display: flex;
		}

		// Body
		.kt-todo__body {
			.kt-todo__title {
				color: kt-base-color(label, 4);
				font-size: 1.5rem;
				font-weight: 600;
				margin-top: 1rem;
				display: block;

				&:hover {
		        	color: kt-brand-color();
		        	transition: all 0.3s ease;
		      	}
			}

			.kt-todo__actions {
				display: flex;
				align-items: center;
				padding: 0.8rem 0 2rem 0;

				.kt-todo__section {
					display: flex;
					align-items: center;

					.kt-todo__cricle {
						padding-right: 0.5rem;
						font-size: 1.1rem;
					}

					.kt-todo__text{
						color: kt-base-color(label, 1);
						font-weight: 500;
					}

					&:last-child {
						padding-left: 1.5rem;
					}
				}
			}

			.kt-todo__desc{
				padding-bottom: 1.5rem;
				display: block;
				color: kt-base-color(label, 1);
				font-weight: 500;
			}

			.kt-todo__leble {
				display: block;
				padding-top: 0.7rem;

				i {
					padding-right: 0.5rem;
				}

				a {
					color: kt-base-color(label, 2);
					font-weight: 500;

					&:hover {
			        	color: kt-brand-color();
			        	transition: all 0.3s ease;
			      	}
				}
			}

			.kt-todo__item {
				padding-top: 3rem;

				&:last-child {
					padding-top: 2rem;
				}

				.kt-todo__box {
					display: flex;
					align-items: center;

					.kt-media {
						margin-right: 1rem;
					}

					.kt-todo__username {
						flex-grow: 1;
						color: kt-base-color(label, 3);
						font-weight: 500;

						&:hover {
			        color: kt-brand-color();
			        transition: all 0.3s ease;
			      }
					}

					.kt-todo__date {
						color: kt-base-color(label, 1);
						font-weight: 500;
					}
				}

				.kt-todo__text {
					padding-left: 3.3rem;
					display: block;
					color: kt-base-color(label, 1);
					font-weight: 500;
				}
			}
		}
	}

	// Form
	.kt-todo__form {
		display: flex;
		flex-direction: column;
		box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.1);

		.kt-todo__head {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			padding: 20px kt-get($kt-portlet, space, desktop) - 10px 20px kt-get($kt-portlet, space, desktop);
			border-bottom: 1px solid kt-base-color(grey, 2);

			.kt-todo__title {
				margin-right: 10px;
				font-size: 1.2rem;
				font-weight: 500;
				color: kt-base-color(label, 3);
			}

			.kt-todo__actions {
				display: flex;

				.kt-todo__icon {
					margin-left: 5px;
				}
			}
		}

		.kt-todo__body {
			padding: 0 0 10px 0;

			.kt-todo__to {
				display: flex;
				min-height: 50px;
				align-items: center;
				padding: 10px kt-get($kt-portlet, space, desktop);

				.kt-todo__wrapper {
					display: flex;
					flex-direction: column;
					flex-grow: 1;
				}

				.tagify {
					border: 0 !important;

					.tagify__input {
						border: 0 !important;
					}
				}

				.kt-todo__field {
					display: flex;
					align-items: center;
					width: 100%;
					padding: 0;

					&.kt-todo__field--cc,
					&.kt-todo__field--bcc {
						display: none;
						margin-top: 5px;
					}

					.kt-todo__label {
						font-weight:400;
						font-size: 1rem;
						width: 40px;
						min-width: 40px;
						color: kt-base-color(label, 2);
					}

					.kt-todo__input {
						flex-grow: 1;

						input {
							border: 0 !important;
							box-shadow: none !important;
							-moz-appearance: none !important;
							-webkit-appearance: none !important;
						}

						.form-control {
							border: 0;
							border-radius: 0;
							padding-left: 0;
							padding-right: 0;

							@include kt-input-placeholder(kt-base-color(label, 2));
							color: kt-base-color(label, 2);
						}
					}

					.kt-todo__tools {
						display: flex;
						align-items: center;
						margin-left: 1rem;

						.kt-todo__tool {
							font-size: 1rem;
							color: kt-base-color(label, 1);
							font-weight: 500;
							margin-left: 10px;
							cursor: pointer;
						}
					}
				}

				&.kt-todo__to--cc {
					.kt-todo__tools {
						.kt-todo__tool:nth-child(1) {
							display: none;
						}
					}

					.kt-todo__field.kt-todo__field--cc {
						display: flex;
					}
				}

				&.kt-todo__to--bcc {
					.kt-todo__tools {
						.kt-todo__tool:nth-child(2) {
							display: none;
						}
					}

					.kt-todo__field.kt-todo__field--bcc {
						display: flex;
					}
				}
			}

			.kt-todo__subject {
				display: flex;
				min-height: 50px;
				align-items: center;
				padding: 0 kt-get($kt-portlet, space, desktop);
				border-top: 1px solid kt-base-color(grey, 2);

				.form-control {
					border: 0;
					border-radius: 0;
					padding-left: 0;
					padding-right: 0;
					font-weight:400;
					font-size: 1rem;

					@include kt-input-placeholder(kt-base-color(label, 2));
					color: kt-base-color(label, 2);
				}
			}

			.kt-todo__text {
				padding: 10px kt-get($kt-portlet, space, desktop);
				padding-bottom: 0;
				font-weight: 400;
				font-size: 1rem;
				color: kt-base-color(label, 2);
			}

			.ql-container.ql-snow  {
				border: 0;
				padding: 0;
				border-radius: 0;

				.ql-editor {
					font-weight:400;
					font-size: 1rem;
					color: kt-base-color(label, 2);
					padding: 15px kt-get($kt-portlet, space, desktop);
					font-family: kt-get($kt-font-families, regular);

					&.ql-blank {
						&:before {
							left: kt-get($kt-portlet, space, desktop);
							color: kt-base-color(label, 1);
							font-weight: 400;
							font-style: normal;
						}
					}
				}
			}

			.ql-toolbar.ql-snow {
				display: flex;
				height: 50px;
				align-items: center;
				border-radius: 0;
				border: 0;
				border-top: 1px solid kt-base-color(grey, 2);
				border-bottom: 1px solid kt-base-color(grey, 2);
				padding-left: 18px;

				.ql-picker-label {
					&,
					&:before {
						font-weight:400;
						font-size: 1rem;
						color: kt-base-color(label, 2);
						font-family: kt-get($kt-font-families, regular);
					}
				}
			}

			.kt-todo__attachments {
				min-width: 500px;
    		display: inline-block;
				padding: 0 kt-get($kt-portlet, space, desktop);
			}
		}

		.kt-todo__foot {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			width: 100%;
			padding: 20px kt-get($kt-portlet, space, desktop) - 10px 20px kt-get($kt-portlet, space, desktop);
			border-top: 1px solid kt-base-color(grey, 2);

			.kt-todo__primary {
				display: flex;
				flex-grow: 1;
				align-items: center;

				.btn-group {
					.btn {
						&:nth-child(1) {
							padding-left: 20px;
							padding-right: 20px;
						}

						&:nth-child(2) {
							padding-left: 6px;
							padding-right: 9px;
						}
					}
				}

				.kt-todo__panel {
					display: flex;
					align-items: center;
					margin-left: 1rem;
				}
			}

			.kt-todo__secondary {
				display: flex;
				align-items: center;
				margin: 0;
			}
		}
	}

	// Portlet head
	.kt-portlet__head {
		min-height: 80px !important;
		padding: 10px kt-get($kt-portlet, space, desktop);
	}
}

// Tablet and mobile mode
@include kt-tablet-and-mobile {
	// Inbox
	.kt-todo {
		display: flex;
		flex-wrap: wrap;
		padding: 0;

		// Aside
		.kt-todo__aside {
			background: #fff;
			margin: 0;

			.kt-todo__nav {
				.kt-nav {
					.kt-nav__item {
            			.kt-nav__link-title {
                			padding-left: 1.2rem;
            			}

						.kt-nav__link {
							padding: 0.75rem 10px;
						}
					}
				}
			}
		}

		// List
		.kt-todo__list {
			.kt-todo__items {
				overflow: auto;

				.kt-todo__item {
					min-width: 500px;
					//flex-wrap: wrap;
					padding: 10px kt-get($kt-portlet, space, mobile);
					margin-bottom: 15px;
				}
			}

			// Portlet head
			.kt-portlet__head {
				min-height: 60px !important;
				padding: 10px kt-get($kt-portlet, space, mobile);
			}

			// Foot
			.kt-todo__foot {
				padding: 0 kt-get($kt-portlet, space, mobile);
			}
		}

		// View
		.kt-todo__view {
			.kt-todo__subject {
				padding: 10px kt-get($kt-portlet, space, mobile);

				.kt-todo__title {
					display: block;

					.kt-todo__text {
						display: inline;
					}
				}
			}

			.kt-todo__messages {
				padding: 10px kt-get($kt-portlet, space, mobile);

				.kt-todo__message {
					padding: 0 10px 5px 10px;
    			margin-bottom: 15px;

					.kt-todo__head {
						.kt-media {
							span {
								width: 26px;
    							height: 26px;
							}
						}

						.kt-todo__info {
							.kt-todo__details {
								.kt-todo__desc {
									display: none;
								}
							}
						}
					}
				}
			}

			.kt-todo__reply {
				padding: 10px kt-get($kt-portlet, space, mobile);
				overflow: auto;
			}
		}

		// Portlet head
		.kt-portlet__head {
			min-height: 60px !important;
			padding: 10px kt-get($kt-portlet, space, mobile);
		}
	}
}

// Mobile mode
@include kt-mobile {
	// Inbox
	.kt-todo {
		// Toolbar
		.kt-todo__head {
			padding: 13px;

			// Nav
	    	.kt-todo__nav {
				.btn {
					margin-right: 0.2rem;
				}
			}
		}

		// View
		.kt-todo__view {
			.kt-todo__messages {
				.kt-todo__message {
					.kt-todo__head {
						flex-wrap: wrap;

						.kt-media {

						}

						.kt-todo__info {

						}

						.kt-todo__actions {
							flex-grow: 1;
							justify-content: space-between;
						}
					}
				}
			}

			.kt-todo__reply {
				padding: 10px kt-get($kt-portlet, space, mobile);
			}
		}
	}
}
// Aside  offcanvas
@include kt-offcanvas-build(kt-todo__aside, tablet-and-mobile, kt-get($kt-todo-aside-config, offcanvas) );