/*=================== Header ===================*/

.Vuely-toolbar.v-toolbar {
	box-shadow: $header-box-shadow;
	background-color: #f5f5f5;
	z-index: 2;
   .v-toolbar__content {
      justify-content: space-between;
      padding: 0;
      .navbar-left {
         padding-left: 1rem;
      }
      .navbar-right {
         padding-right: 1.5rem;
      }
   }
   .v-badge.badge--overlap {
      top: 0;
      >span {
         right: -3px;
         height: 20px;
         width: 20px;
         span {
            padding-top: 2px;
         }
      }
   }
}

/*=========== Site Logo ============*/

.site-logo {
   height: 64px;
   display: flex;
   align-items: center;
   padding: 0 0.625rem; //0 10px;
}

/*=========== Quick link ============*/

.quciklink-dropdown,
.notification-dropdown,
.language-dropdown {
   background-color: $base-light;
   .dropdown-content {
      width: 321px;
      .dropdown-top {
         padding: 1rem 1.25rem;
      }
      .dropdown-list {
         background: transparent !important;
			.v-list-item{
				display: inline-flex;
				justify-content: flex-start;
				align-items: center;
            width: 46.5%;
            box-shadow: 0 3px 2px 0 rgba(0, 0, 0, 0.02);
            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;
				}
			}
      }
   }
}

.notification-dropdown {
   .dropdown-list {
      .v-list-item{
         width: 97% !important;
      }
   }
}

.v-input__slot {
   background: transparent !important;
}

.cart-dropdown {
   min-width: 320px !important;
   .dropdown-top {
      padding: 1rem 1.25rem;
      border-radius: 0 !important;
   }
   .dropdown-content {
      .v-list-item {
         height: auto;
         padding: 0.625rem;
         @include border(1px solid, $border-color, bottom);
         .v-list-item__action {
            opacity: 0;
            transition: opacity 0.3s linear;
            .v-btn {
               margin: 0;
            }
         }
         &:hover {
            .v-list-item__action {
               opacity: 1;
            }
         }
      }
   }
}

/*================== Header Theme Color =================*/

.Vuely-toolbar.v-toolbar {
   &.primary,
   &.warning,
   &.success,
   &.error,
   &.info {
      *,
      .v-text-field__slot input::placeholder {
         color: $light !important;
      }
   }
}

/*======== Responsive ========*/

@media (max-width: 767px) and (min-width: 320px) {
   .search-bar,
   .quick-link,
   .upgrade-btn,
   .full-screen {
      display: none !important;
   }
   .mobile-search {
      display: block !important;
   }
   .Vuely-toolbar.v-toolbar .v-toolbar__content {
      .navbar-left {
         padding-left: 0.5rem;
      }
      .navbar-right {
         padding-right: 0.5rem;
      }
      .v-badge__badge{
         font-size:0.875rem;
         height:1.25rem;
         min-width:1.25rem;
         right:0;
      }
   }
   .quciklink-dropdown,
   .notification-dropdown,
   .language-dropdown,
   .cart-dropdown {
      max-width: 275px !important;
      min-width: auto !important;
      left: 0 !important;
      right: 0;
      margin: 0 auto;
      .dropdown-content {
         width: 275px !important;
      }
   }
}
.navbar-right {
	.v-btn--icon .v-icon{
		font-size:1.5rem;
	}	
	.v-badge .grey--text{
		vertical-align: middle;
	}
}
