/*=========== Sidebar Scss ============*/

.v-navigation-drawer--is-mobile {
   .sidebar-profile {
      margin-top: 0 !important;
   }
}

.v-navigation-drawer {
   overflow-y: auto;
   height: 100% !important;
   display: flex;
   flex-direction: column;
   background-position: 100% center;
   background-size: cover;
   background-repeat: no-repeat;
   transition: all 0.4s linear 0s;
   padding: 0;
   box-shadow: $sidebar-box-shadow;
   .navigation {
      .v-list {
         .sidebar-profile {
				margin-bottom: 0.9375rem; //15px;
				.v-list-item__avatar{
					margin-right: 0.9375rem; //15px;
				}
				.v-btn{
					height: 2rem;
					width: 2rem;
				}
				.v-list-item__title{
					color: $sidebar-nav-color;
				}
         }
         .v-list-item--link {
            font-weight: $sidebar-nav-font-weight;
            font-size: $sidebar-subnav-font-size;
         }
         .sidebar-title {
            span {
               font-size: 12px;
               font-weight: $sidebar-nav-font-weight;
               margin-bottom: 0.625rem; //10px;
					display: block;
					color: $sidebar-nav-color;
            }
          
         }
         .v-list-group {
            margin-bottom: 0.625rem;
            .v-list-group__header {
               .v-list-group__header__prepend-icon {
						min-width: 30px;
						margin-right:0.625rem;
						padding: 0 0.75rem;
                  .v-icon {
                     transform: rotate(0);
                     transition: all 0.3s ease-in-out;
							font-size: $sidebar-subnav-font-size;
                  }
               }
               .v-list-item,.v-list-item__title {
                  font-weight: $sidebar-nav-font-weight;
                  font-size: $sidebar-nav-text-size;
                  padding-left: 0;
					}
					.v-list-group__header__prepend-icon,
					.v-list-item,.v-list-item__title ,
					.v-list-item__title span,.v-list-item__title i{
						color: $sidebar-nav-color;
					}
					.v-list-item__title span{
						line-height: 1.5;
					}
               &.v-list-item--active {
                  &:before {
							transform: scaleX(1);
							opacity: 1;
                  }
                  .v-list-item__title,.v-list-item__title span,
                  i {
                     font-weight: $font-weight-bold;
                     color: $sidebar-nav-active-color;
                  }
                  .v-list-group__header__prepend-icon {
                     .v-icon {
                        transform: rotate(90deg);
                     }
                  }
               }
            }
            .v-list-group__items{
               .v-list-item--link {
						padding-left: 2.813rem; //45px;
						&:before{
							display: none;
						}
                  &:hover,
                  &.v-list-item--active {
                     background-color: transparent !important;
                  }
               }
            }
			}
			.v-list-group__items{
				.v-list-item__title {
					font-weight: $sidebar-nav-font-weight;
					font-size: $sidebar-nav-text-size;
					padding-left: 0;
					color: $sidebar-subnav-font-color;
				}
				.v-list-item--active .v-list-item__title{
					font-weight: $font-weight-bold;
					color: $sidebar-nav-active-color;
				}
			}
         >div>div>.v-list-item--link,
         .v-list-group__header{
            background-color: transparent !important;
            position: relative;
            &:before {
               content: "";
               position: absolute;
               top: 0;
               bottom: 0;
               left: 0;
               right: 0;
               z-index: -1;
               width: 235px;
               border-radius: 0 100px 100px 0;
               background-color: rgba(0, 0, 0, 0.2);
               transform: scaleX(0);
               transform-origin: left;
               transition: transform 0.4s ease-in-out;
               box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.09);
            }
            &:hover {
               &:before {
						transform: scaleX(1);
						opacity: 1;
               }
            }
         }
         >div>div>.v-list-item--link {
            margin-bottom: 0.5rem;
            padding:0;
            >.v-list-item__action {
               padding: 0 1.3rem;
            }
         }
         .v-list-item--link {
            width: 210px;
            border-radius: 0 100px 100px 0;
            transition: background-color 0.3s ease;
            .v-list-item__action {
               min-width: 30px;
               i {
                  font-size: $sidebar-subnav-font-size;
               }
            }
            &.v-list-item--active {
               &:before {
						transform: scaleX(1);
						opacity: 1;
               }
               .v-list-item__title {
                  font-weight: $font-weight-bold;
               }
            }
         }
         .v-list-group--active {
            &::after,
            &::before {
               background: none;
            }
         }
      }
   }
}
.scroll-area {
   position: relative;
   height: 100%;
}

.sidebar {
   height: 100%;
   overflow: hidden;
   overflow-x: hidden;
   .site-logo {
		padding: 0 1rem;
   }
   &::before,
   &::after {
      display: block;
      content: "";
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      bottom: 0;
      z-index: -9;
   }
   &::before {
      opacity: .9;
   }
   i {
      font-size: 22px;
      vertical-align: top;
   }
   .v-toolbar__content, .v-toolbar__extension{
      padding:  0;// 0 20px;
	}
	.v-list {
		max-height: 100%;
		width: 100%;
	}
   .v-list-item__title {
      position: static;
   }
   .ps > .ps__scrollbar-x-rail {
     
      display: none !important;
   }
}

 //Sidebar-profile
.sidebar-profile {
   .v-list-item__content {
      .v-list-item__title {
         font-size: $font-size-sm;
      }
   }
}

.userblock-dropdown {
   background-color: $base-light;
   .dropdown-content {
      width: 225px;
      .dropdown-top {
         padding: 1rem 1.25rem;
      }
      .dropdown-list {
         background: transparent;
         .v-list-item {
				box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.11);
				margin: 0.3125rem;
				background-color: $light;
				span {
					font-size: $font-size-sm;
					transition: color 0.3s ease;
				}
				&:hover {
					span {
						color: $primary !important;
					}
					background-color: $light !important;
				}
			}
      }
   }
}

.Vuely-sidebar.background-none {
   .sidebar:before {
      opacity: 1 !important;
   }
}

.sidebar-overlay-dark::before {
   background: $sidebar-bg;
}

.sidebar-overlay-light::before {
   background: rgba(255, 255, 255, 0.9);
}

.sidebar-overlay-primary::before {
   background: $light-primary;
}

.sidebar-overlay-success::before {
   background: $light-success;
}

.sidebar-overlay-pink::before {
   background: $light-pink;
}

.sidebar-overlay-warning::before {
   background: $light-warning;
}

.sidebar-overlay-purple::before {
   background: $light-purple;
}


/*======= Hide Sidebar Background Image =======*/

.background-none {
   background-image: none !important;
}

/*=========== Right Sidebar ============*/

.inner-toolbar {
   padding: 1.25rem;
   .v-list-item {
      padding: 0;
	}
	.v-input--selection-controls{
		margin-top: 0;
		padding-top: 0;
	}
   .theme-color,
   .sidebar-filter,
   .header-filter {
      .v-list {
         display: flex;
         align-items: center;
			justify-content: center;
         .v-list-item--link {
            min-height: 1.75rem;
            width: 1.75rem;
            border-radius: 100%;
            overflow: hidden;
            margin: 0 0.25rem;
				position: relative;
				flex: 0 0 auto;
            &:after {
               position: absolute;
               content: "";
               border: 2px solid $light;
               transform: scale(2);
               opacity: 0;
               top: 0;
               left: 0;
               right: 0;
               bottom: 0;
					margin: 0.25rem;
					min-height:auto;
               border-radius: 100%;
               transition: all 0.3s ease-in-out;
				}
				&:before{
					display: none;
				}
            span {
               height: 1.75rem;
               width: 1.75rem;
               position: relative;
               display: inline-block;
               &:before {
                  position: absolute;
                  content: "";
                  left: 0;
                  right: 0;
                  top: 0;
                  bottom: 0;
               }
            }
         }
         .active-theme {
            &:after {
					transform: scale(1);
					opacity: 1;
				}
         }
      }
   }
   .theme-layouts,
   .theme-color,
   .sidebar-filter,
   .header-filter,
   .sidebar-images {
      padding: 1.25rem;
      border-radius: 4px;
      box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.09);
      margin-bottom: 1.5rem;
   }
   .sidebar-filter,
   .header-filter {
      .v-list {
         .v-list-item--link:nth-child(2) {
				border: 1px solid $dark;
				max-height:1.6875rem;
            width:1.6875rem;
				&:after {
					border-color: $dark;
				}
			}
      }
   }
   .img-holder {
      border: 3px solid transparent;
      &.active {
         border-color: $success;
      }
      img {
         display: block;
         height: 110px;
         width: 50px;
      }
   }
}

/*================= Mini Sidebar ================*/
.v-navigation-drawer--mini-variant .v-list-item > *:not(:first-child) {
	display: block !important;
	position: static !important;
	height:auto;
}
.v-navigation-drawer--mini-variant .v-list-group--no-action .v-list-group__items, .v-navigation-drawer--mini-variant .v-list-group--sub-group{
	display: block ;
}
.collapse-sidebar {
   .Vuely-sidebar.v-navigation-drawer {
      transition: all 0.3s ease-in-out;
      .navigation .v-list .v-list-group .v-list-group__header .v-list-item span,
      .navigation .v-list .v-list-group .v-list-group__items,
      .v-list>div>div>.v-list-item--link .v-list-item__title span,
      .v-list>div>div>.v-list-item--link .v-list-item__action,
      .v-list-group__header__prepend-icon,
      .sidebar-profile .v-list-item__title,.sidebar-profile .v-btn,
      .sidebar-title {
         opacity: 0;
         transition: all 0.3s ease-in-out;
      }
      .sidebar-title {
         max-height: 0;
         overflow: hidden;
         transition: all 0.3s ease-in-out;
      }
      .sidebar-profile{
         padding-left:4rem;
		}
		.v-list-group{
			margin-left:-21px;
		}
      .site-logo .router-link-active {
         max-width: 35px;
         overflow: hidden;
         transition: all 0.3s ease-in-out;
      }
      .sidebar-profile .v-list-item__title {
         line-height: 1.75rem;
		}
		.v-list-item__content >div{
			white-space: nowrap;
		}
      .navigation .v-list .v-list-group {
         overflow: hidden;
         .v-list-group__items {
            max-height: 0;
            transition: all 0.3s ease-in-out;
         }
      }
      .v-list>div>div>.v-list-item--link {
         padding: 0;
         >.v-list-item__action {
            padding: 0 0.25rem;
         }
      }
      &.v-navigation-drawer--mini-variant {
         .v-list-group__header__prepend-icon {
            flex: none;
            justify-content: flex-start;
            transition: all 0.3s ease-in-out;
            width: auto;
            padding: 0;
         }
         .v-list-item__content,
         .v-list-item:after {
            opacity: 1 !important;
         }
		}

      &:hover {
			width: $sidebar-width !important;
         .navigation .v-list .v-list-group .v-list-group__header .v-list-item span,
			.navigation .v-list .v-list-group .v-list-group__items,
			.v-list>div>div>.v-list-item--link .v-list-item__title span,
			.v-list>div>div>.v-list-item--link .v-list-item__action,
			.v-list-group__header__prepend-icon,
			.sidebar-profile .v-list-item__title,.sidebar-profile .v-btn,
			.sidebar-title{
            opacity: 1;
			}
			.sidebar-profile {
				padding-left:0.9375rem;
			}
			.v-list-group{
				margin-left:0;
			}
         .v-list>div>div>.v-list-item--link {
            >.v-list-item__action {
               padding: 0 1.3rem;
            }
         }
         .site-logo .router-link-active {
            max-width: 120px;
            overflow: visible;
         }
         .v-list-group__header__prepend-icon {
            padding: 0 1rem;
         }
         .navigation .v-list .v-list-group {
            .v-list-group__items {
               max-height: 1000px;
            }
         }
         .sidebar-title {
            max-height: 3rem;
         }
      }
   }
}

/*=============== Sidebar-Light ================*/

.sidebar-overlay-light {
   *,
   i,
   a,
   span,
   .v-icon,
   .v-list-item__title {
      color: $body-color !important;
   }
}

/*================= Chat-Sidebar ===================*/

@media (max-width: 768px) and (min-width: 320px) {
   .chat-sidebar-wrap {
      width: 250px !important;
      .v-tabs * {
         font-size: 0.875rem;
      }
      .v-list-item__action i,
      .v-toolbar__content * {
         font-size: $html-font-size;
      }
	}
	.title-bar .v-breadcrumbs h2 {
		width: 100%;
	}
}
.sidebar .v-list-item__content a {
    display: block !important;
}

.v-navigation-drawer .navigation .v-list .v-list-group.not-submenu .v-list-group__header.v-list-item--active .v-list-group__header__prepend-icon .v-icon{
   transform:rotate(0deg);
}
