/*
This file is part of the Meeds project (https://meeds.io/).
Copyright (C) 2020 Meeds Association
contact@meeds.io
This program is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 3 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
Lesser General Public License for more details.
You should have received a copy of the GNU Lesser General Public License
along with this program; if not, write to the Free Software Foundation,
Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
*/
@import "../../../variables.less";

.UIToolbarContainer {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: @zindexFixedNavbar;
	.UserInfoPortletTDContainer,
	.UIHelpPlatformToolbarPortletTDContainer,
	.SearchPortletTDContainer,
	.UICreatePlatformToolBarPortletIDTDContainer,
	.UISetupPlatformToolBarPortletIDTDContainer,
	.NotificationPopoverPortletTDContainer,
	.AdminToolBarPortletTDContainer,
	.middle-topNavigation-containerTDContainer,
	.right-topNavigation-containerTDContainer {
		float: right !important;
        max-height: @navbarHeight;
	}

  #middle-topNavigation-container .UIRowContainer {
    display: flex;
  }

  	.toggle-left-bar span {
    	background: white;
  	}

	.uiCreate{
		min-width: 240px;
		.uiAction{
			padding: 10px 0 5px 0;
			text-align: center;
			.btn{
				margin: 0 3px;
				min-width: 40px;
			}

		}
		.uiFormInput {
			margin-bottom:15px;
			padding: 0 10px;

			.createName{
				margin-bottom: 10px;
			}

			table label {
				white-space: nowrap;
				display: inline;
			}

			.btn-group{
				font-size: 13px;
			}

			.btn-group li > a.selected{
			   #gradient > .vertical(@primaryColorLighter, @primaryDarkColor);
			    color: @baseBackground;
			}
			.uiFormScrollMenu{
				margin-left: 5px;
				div > span:first-child{
				 	display: inline-block;
				    overflow-x: hidden;
				    text-overflow: ellipsis;
				    width: 111px;
				    vertical-align: middle;
				    text-align: left;
				}
				.scroll-menu{
					.dropdown-menu{
						width: 170px;
						max-height: 362px;
						overflow: auto;
						li a{
							overflow: hidden;
    						text-overflow: ellipsis;
						}
					}
				}
			}

			.uiForumFilter{
				margin-left: 5px;
				margin-top: 5px;
				.titleForum{
				    display: inline-block;
				    overflow-x: hidden;
				    text-overflow: ellipsis;
				    width: 111px;
				    vertical-align: middle;
				    text-align: left;
				}

				.filterMenu{
					&> ul{
					    overflow-y: auto;
					    overflow-x: hidden;
					    max-height: 440px; /* 13x23+3 */
					}

                    .dropdown-menu{
                        width: 250px;
                        position: absolute;
                        top: auto;
                        left: auto;
                    }

					.filterInput{
	    				margin: 10px;
	    				width: 91%;
					}

					.category{
					    background: @primaryBackgroundLight;
					    border-bottom: 1px solid @borderColor;
					    border-top: 1px solid @borderColor;
					    .box-shadow(0 -15px 17px @primaryBackground inset);
					    color: @textColor;
					    font-weight: bold;
				        padding: 5px 10px;
				        text-overflow: ellipsis;
				        overflow-x: hidden;
					}
					.forum li a{
						text-overflow: ellipsis;
						overflow-x: hidden;
						display: block;
					}
					.forum li a:hover{
						color: @baseBackground;
					}
				}

			}

		}

	}


	.NormalContainerBlock .ToolbarContainer {
		background: none;
		height: 41px;
		border: none;
		.TRContainer {
			height: 41px;
		}
	}

	.uiDropdownWithIcon {
		background: none;
		padding-left: 2px;
		.uiDropdownWithIcon {
			background: none;
		}
	 	> a {
		padding: 0 10px 0 11px;
		line-height: 41px;
		height: 41px;
		display: inline-block;
		color: @baseBackground;
		cursor: pointer;
			> i.uiIconPLF24x24Edit,
			> i.uiIconPLF24x24Setup {
				margin-right: 5px;
			}
		}
		> a:hover,.uiDropdownWithIcon.open > a {
			background: none;
		}
		> .dropdown-menu {
			margin-top: 8px;
		}
	}

	.uiDropdownWithIcon.pull-left {
		> .dropdown-menu {
			margin-top: 8px;
			&:before {
		    content: '';
		    display: inline-block;
		    border-left:   7px solid transparent;
		    border-right:  7px solid transparent;
		    border-bottom: 7px solid @dropdownBorder;
		    border-bottom-color: @dropdownBorder;
		    position: absolute;
		    top: -8px;
		    left: 9px;
		  }
		  &:after {
		    content: '';
		    display: inline-block;
		    border-left:   6px solid transparent;
		    border-right:  6px solid transparent;
		    border-bottom: 6px solid @dropdownBackground;
		    position: absolute;
		    top: -6px;
		    left: 10px;
		  }
		}
	}

	.uiDropdownWithIcon.pull-right {
		> .dropdown-menu {
			&:before {
		    content: '';
		    display: inline-block;
		    border-left:   7px solid transparent;
		    border-right:  7px solid transparent;
		    border-bottom: 7px solid @dropdownBorder;
		    border-bottom-color: @dropdownBorder;
		    position: absolute;
		    top: -8px;
		    right: 10px;
		  }
		  &:after {
		    content: '';
		    display: inline-block;
		    border-left:   7px solid transparent;
		    border-right:  7px solid transparent;
		    border-bottom: 7px solid @dropdownBackground;
		    position: absolute;
		    top: -6px;
		    right: 10px;
		  }
		}
	}

	.uiCreateToolBarPortlet {
		.uiCreateForm {
			min-width: 200px;
			padding: 0 10px;
			.form-horizontal {
				padding-top: 5px;
			}
			.control-label {
				width: auto;
				padding-top: 6px;
				float: left;
			}
			.controls {
				margin-left: 90px;
			}
			.uiAction {
				margin: 0 -10px;
			}
		}

		.uiQuickAddEvent {
			.quickAddEventContainer {
				padding: 0 10px;
			}
			.form-horizontal {
				padding: 20px 0 5px;
				.control-label {
					width: 105px;
					text-align: left;

				}
				.controls {
					margin-left: 108px;
				}
				.title {
					input[type="text"] {
						width: 184px;
						max-width: 100%;
					}
				}
				input[type="text"] {
					margin-bottom: 3px;
				}
			}
			.choiceOption {
				.control-label {
					font-weight: bold;
				}
			}
			.uiSelectbox { 
				margin-bottom: 0;

			}

			.selectboxMini {
				.uiSelectbox {
					width: 87px;
					.selectbox {
						width: 89px;
					}
				}
			}
			.selectboxMedium {
				.uiSelectbox {
					width: 181px;
					.selectbox {
						width: 184px;
						max-width: 100%;
					}
				}
			}
			.uiAction {
				text-align: right;
				.btn:last-child{
					margin-right: 15px;
				}
			}
		}

	}

	.uiAdminToolbarPortlet {
		.seoImgBlock{
			padding: 5px 20px 5px 10px;
			.UISEOToolbarPorlet .SEOToolbar {
                span:after {
                   font-family: "PLF-FONT-ICONS";
                   font-size: 17px;
                   color: @baseColorLight;
                   content: "\e694";
                   position: relative;
                   top: 2px;
                }
                .Full span:after {
                   color: @successColor;
                }
                .Partial span:after {
                   color: @colorIconOrange;
                }
                .Empty span:after {
                   color: @errorColor;
                }
			}
		}
		.seoImgBlock:hover,
		.seoImgBlock:focus,
		.dropdown-submenu:hover > .seoImgBlock,
		.dropdown-menu .active > .seoImgBlock,
		.dropdown-menu .active > .seoImgBlock:hover  {
			#gradient > .vertical(@primaryColorLighter, @primaryDarkColor);
			color: @dropdownLinkColorHover;
		}

		.quickEditUnchecked {
			background-image: url("@{images-path}/platform/skin/ToolbarContainer/check.png");
			background-repeat: no-repeat;
			background-position: bottom center;
			display: inline-block;
			width: 14px; 
			height: 14px; 
			vertical-align: text-bottom;
		}

		.quickEditChecked {
			background-image: url("@{images-path}/platform/skin/ToolbarContainer/check.png");
			background-repeat: top-repeat;
			background-position: top center;
			display: inline-block;
			width: 14px;
			height: 14px;
			vertical-align: text-top;
		}
	}

	.uiUserToolBarPortlet > a > img {
		max-width: 26px;
		max-height: 26px;
		border-radius: 2px;
	}

	#HomeLink {
		padding: 8px 10px 0;

		.HomeLink > img {
		    max-height: 31px;
		}
	}
}

.full-topNavigation {
    #PlatformAdminToolbarContainer {
        padding-top: @navbarHeight;
    }
    .UIToolbarContainer {
        left: 0;
    }
}

.UIToolbarContainerDark {
	.NormalContainerBlock .ToolbarContainer {
			#gradient > .vertical(@toolbarDarkStartBackground, @toolbarDarkEndBackground);
			border-bottom: 1px solid @toolbarDarkBorder;
		}

		.uiDropdownWithIcon {
			background: url("@{images-path}/platform/skin/ToolbarContainer/line.png") no-repeat center left;
		 	> a {
				color: @toolbarDarkLinkColor;
			}
			> a:hover,.uiDropdownWithIcon.open > a {
				background: @toolbarDarkBackgroundHover;
				color: @toolbarDarkLinkHoverColor;
			}
		}
        .itemListContainer .uiDropdownWithIcon {background: none}
}

.UIToolbarContainerLight {
	.NormalContainerBlock .ToolbarContainer {
			#gradient > .vertical(@toolbarLightStartBackground, @toolbarLightEndBackground);
			border-bottom: 1px solid transparent;
		}

		.uiDropdownWithIcon {
			background: url("@{images-path}/platform/skin/ToolbarContainer/line.png") no-repeat left center;
		 	> a {
				color: @toolbarLightLinkColor;
			}
			> a:hover, &.open > a {
				background: @toolbarLightBackgroundHover;
				color: @toolbarLightLinkHoverColor;
			}
		}
}

.dropdown  .seoImgBlock {
  cursor: pointer;
    span {
      color:@dropdownLinkColor ;
      &:hover {
        color:@dropdownLinkColorHover ;
      }
    }
    &:hover span{
      color:@dropdownLinkColorHover ;
    }
}

.uiUserToolBarPortlet > .dropdown-toggle {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    vertical-align: middle;
}

//------------------------- uiNotificationPopoverToolbarPortlet -------------------------
.uiNotificationPopoverToolbarPortlet {
	.badgeNotification {
		font-family: @sansFontFamily;
	}
	.badgeNotification {
		position: absolute;
		top: -4px; right: -8px;
		display:none;
	}
	.dropdown-menu {
		padding: 0;
		.displayItems {
      .quoteContainer {
        padding-left: 5px;
        margin: 5px 0;
        max-height: 20px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .comment {
        border-left: 6px solid #aacded;
        padding-left: 5px;
        font-style: italic;
      }
		}
	}
	#NotificationPopup {
	    max-height: none;
	    overflow-y: visible;
	}
	.actionMark {
		text-align: right;
		padding: 5px 10px;
		border-bottom: 1px solid  @borderColor;
		#markAllReadLink {
			pointer-events: none;
			background: none;
			outline: none;
			display: inline-block;
			color: @textLightColor;
			padding: 0!important;
			&:hover {
			    background: none;
			    color: @textLightColor;
			}
		}
	}
	.actionMark.enabled {
		#markAllReadLink {
		  pointer-events: auto;
		  color: @linkColor;
		}
		+ li .displayItems {
			li:first-child {
				.border-radius(0);
			}
		}
	}
	.actionLink {
		vertical-align: middle;
		text-align: center;
		border-top: 1px solid @borderColor;
		padding: 10px;
	}
	.dropdown-menu {
		> li {
			&.no-items {
				display: none;
				padding: 25px 10px 25px;
				text-align: center;
				color: @textLightColor;
				background: url("@{base-images-path}/system/background/iconBell.png") no-repeat center center ;
			}
			&.blank {
				+ .actionLink {
					border-top: none;
				}
			}
            .uiIconAddMembership  {
                &:before {
                    content: "\e6c9"; // uiIconConnectUser
                }
            }
            .uiIconAddUser {
                &:before {
                    content: "\e6c4"; // uiIconInviteUser
                }
            }
        }
	}
    li.itemsContainer {
        max-height: ~"calc(100vh - 150px)";
        overflow-y: auto;
    }
	.displayItems {
		overflow-x: hidden;
		&.scroll {
			overflow: auto;
		}
		.text-bold {
			font-weight: bold;
		}
		.user-name{
			color: @linkColor;
		}
		.media  {
		    ol > li {
		      list-style: decimal;
		    }
		    ul > li {
		      margin: 0 0 10px 25px;
		      list-style: initial;
		    }
		}
		> li {
			display: block;
			padding: 6px 10px 6px 10px;
			border-top: 1px solid @borderColor;
			border-top: none;
			position: relative;
			> .remove-item {
				position: absolute;
				top: 4px;
				right: 10px;
				padding: 0px;
				margin: 0px;
				cursor: pointer;
				> .uiIconClose {
					margin: 0px;
					.opacity(80);
					&:hover {
						.opacity(100);
					}
				}
			}
			.status {
				display: block;
				line-height: 18px;
				margin-bottom: 3px;
        margin-right: 10px; 
			}
			.content {
				font-weight: bold;
			}
			.content, .content-normal {
				font-size: 12px;
				.text-overflow;
				.btn {
					font-weight: normal;
					&.btn-primary {
						font-weight: bold;
					}
					+ .btn {
						margin-left: 7px;
					}
				}
				.confirm {
					margin-bottom: 3px;
				}

				p {
					.text-overflow;
          display: inline;
				}
			}
			.avatarXSmall {
				margin-top: 4px;
			}
			.lastUpdatedTime {
				color: @textLightColor;
				font-size: 12px;
				display: inline-block;
			}
			[class^="uiIcon"] {
				margin-right: 7px;
			}
			&.unread {
				background-color: @notifcationUnreadBackground;
			}
			&:hover {
				#gradient > .vertical(@dropdownLinkBackgroundHover, @dropdownLinkBackgroundHoverDark);
				color: @dropdownLinkColorHover;
				cursor: pointer;
				> .remove-item {
					> .uiIconClose, > .uiIconClose:hover {
						color: @colorIconSecondary!important;
					}
				}
				a {
					color: @dropdownLinkColorHover !important;
				}
				.btn {
					color: @btnColor !important;
					&.btn-primary {
						color: @btnPrimaryColor !important;
					}
				}
				.lastUpdatedTime {
					color: @dropdownLinkColorHover;
				}
				.uiIconLightGray {
                    color: @colorIconSecondary;
				}
				.uiIconSocLightGray	{
                    color: @colorIconSecondary;
				}
				.user-name{
					color: @dropdownLinkColorHover;
				}
			}
			&:first-child {
				.border-top-radius(@borderRadiusSmall);
			}
		}
	}
	.loadingIndicator {
		position:relative;
		height: 55px;
		padding: 5px 0px 5px 0px;
		display: none;
		text-align: center;
		.loadingText {
			position: absolute;
			bottom: 5px;
			left: 10px;
			right: 0px;
			text-align: center;
		}
  }
}

@media (max-width: 767px) {
    .UIToolbarContainer .uiCreateToolBarPortlet .create-form-dropdown .dropdown-menu-sub {
        width: 360px;
    }
    //add event and task
     .UIToolbarContainer .uiCreateToolBarPortlet .uiQuickAddEvent {
        .form-horizontal .title input[type="text"] ,.selectboxMedium .uiSelectbox,.selectboxMedium .uiSelectbox .selectbox{
            width: 100%!important;
        }

    }

    .uiCreateToolBarPortlet  .uiQuickAddEvent{
        .inputSmall input[type="text"],
        .inputSmall input[type="password"],select {
            width: 114px!important;
        }
    }
  
    .UIToolbarContainer .dropdown-menu {
        max-height: calc(~"100vh" - @navbarHeight + 30px);
        overflow-y: auto; 
    }

}

@media (max-width: 640px) {
	.UIToolbarContainer .uiCreateToolBarPortlet .uiQuickAddEvent {
		.form-horizontal  {
	        .control-label,.title .control-label {
	            float: left;
	        }
	    }
	    .uiAction {
			text-align: center;
		}
    }
}

/* Fix Responsive*/
@media (max-width: 480px) {
    .UIToolbarContainer .uiCreateToolBarPortlet .create-form-dropdown .dropdown-menu-sub {
        width: 300px;
    }
    .uiCreateToolBarPortlet .uiQuickAddEvent {
        .inputSmall input[type="text"],
        .inputSmall input[type="password"],select {
            width: 135px!important;
        }
    }
	.uiNotificationPopoverToolbarPortlet {
		.displayItems {
			max-width: none;
			min-width: auto;
		}
		.uiDropdownWithIcon {
			&.dropdown {
				position: static;
			}
		}
	}
	.UIToolbarContainer {
		.uiNotificationPopoverToolbarPortlet {
			.uiDropdownWithIcon > .dropdown-menu {
				.border-top-right-radius(0);
				.border-top-left-radius(0);
				left: 0;
				margin-top: 0;
				&:after, &:before {
					display: none!important;
				}
			}
		}
	}
	.UIToolbarContainer .uiCreateToolBarPortlet .uiQuickAddEvent .form-horizontal  {
        .controls , .title .controls{
            margin-left: 0;
        }
        .control-label,.title .control-label {
            width: auto;
            float: none;
        }
    }
    .uiCreateToolBarPortlet .startTime ,.endTime {
        input { margin-right: 5px;} 

    }
    #UICreateList.dropdown-menu {
        border-radius: 0;
	    left: auto !important;
	    min-width: 180px;
	    padding: 0 !important;
	    position: fixed;
	    right: 0 !important;
	    top: 34px;
	    > li {
		    float: left;
		    > a {
			    font-size: 0;
			    line-height: 0;
			    padding: 10px !important;
			    > i{
			    	margin-right: 0;
			    }
			    &:hover{
			    	background: @primaryBackground;
			    	> i{
			    		color: @colorIconDefault;
			    	}
			    }
			}
		}
    }
}
.uiNotificationPopoverToolbarPortlet.mobile-mode {
	.displayItems {
		max-width: none;
		min-width: auto;
	}
	.uiDropdownWithIcon {
		&.dropdown {
			position: static;
		}
	}
}
.UIToolbarContainer {
	.uiNotificationPopoverToolbarPortlet.mobile-mode {
		.uiDropdownWithIcon > .dropdown-menu {
			.border-top-right-radius(0);
			.border-top-left-radius(0);
			left: 0;
			margin-top: 0;
			&:after, &:before {
				display: none!important;
			}
		}
	}
}
.UIToolbarContainer .uiDropdownWithIcon > a > i {
    top: -2px;
}

.uiNotificationPopoverToolbarPortlet  {
    .dropdown-toggle .uiIconPLF24x24Bell {
        position: relative;
    }
}

.DrawerAdminToolBarPortletTDContainer {
  #UIAdminToolbarPortlet {
    .uiPopupWrapper {
      height: 100vh!important;
    }
  }
  float: right;
  .uiAdminToolbarPortlet {
    background: none;

    #DrawerEditAdministration {
      .editAdministrationBtn {
        .uiEditAdminIcon {
          font-size: 24px;
          color: @toolbarLightIconColor;
          &:before {
            font-family: 'PLF-FONT-ICONS';
            content: "\eb72" !important;
          }
        }
      }
      .v-overlay--active {
        height: 100vh;
      }
      .editDrawer {
        width: 410px!important;
        position: fixed;
        height: 100vh!important;
        background: white;
        .editAdminHeader {
          border-bottom: 1px solid #efefef;
          padding-top: 8px!important;
          padding-bottom: 8px!important;
          .editAdminTitle {
            font-size: 18px;
            font-weight: bold;
            color: #4d5466;
          }
          .v-list-item__action {
            cursor: pointer;
          }
        }
        .editAdministrationMenu {
          padding: 12px 16px;
          .editonLineItem {
            padding-bottom: 16px;
            border-bottom: 1px dashed #f5f5f5;
            padding-top: 12px;
            .editOnline {
              display: flex;
              align-items: center;
              justify-content: space-between;
              span {
                font-weight: bold;
                color: #4d5466;
                font-style: italic;
              }
              .quickEditSwitcher {
                width: 40px;
                height: 15px;
                background-color: @greyColor;
                display: inline-block;
                border-radius: 25px;
                position: relative;
              }
              .quickEditUnchecked {
                background-image: none;
                &:before {
                  content: "";
                  position: absolute;
                  width: 19px;
                  height: 19px;
                  background: #fff;
                  border-radius: 50%;
                  top: -2px;
                  box-shadow: 0 0 3px #8e8e8e;
                }
              }
              .quickEditChecked {
                background-image: none;
                background-color: #8bc2ff;
                &:before {
                  content: "";
                  position: absolute;
                  width: 19px;
                  height: 19px;
                  background: @primaryColor;
                  border-radius: 50%;
                  top: -2px;
                }
              }
            }
          }
          .editItemsTitle {
            > a {
              font-size: 15px;
              color: #4d5466;
              font-weight: bold;
              text-transform: uppercase;
              letter-spacing: .5px;
              cursor: default;
            }
          }
          .editSubItemList {
            padding: 8px 0 12px 25px;
            .seoItem {
              padding: 0 0 0 5px!important;
            }
            .editSubItemListItem {
              padding: 8px 0 8px 5px;
              a {
                color:@toolbarLightLinkHoverColor;
                display: block;
              }
              .seoImgBlock {
                padding: 8px 0;
                color: @toolbarLightLinkHoverColor;
                &:hover {
                  background: transparent;
                  color: @toolbarLightLinkHoverColor;
                }
              }
              &:hover {
                background: @greyColor;
                cursor: pointer;
                transition: all 1s;
              }
            }
          }
        }
      }
    }
  }
}

@media(max-width: 767px) {

    .UIToolbarContainer {
        .uiCreateToolBarPortlet .create-form-dropdown .dropdown-menu-sub {
            margin-top: 42px;
        }
        #UICreateList.create-form-dropdown {
            top:0;
        }
    }
}

@media (min-width: 1025px) {
  	.UIToolbarContainer {
      	left: 250px;
      	right: 0;
      	width: auto;
      	transition: left 0.31s;

    	.toggle-left-bar {
      		display: none;
    	}
  	}
}

@media (min-width: 768px) {
	.uiNotificationPopoverToolbarPortlet .dropdown-menu {
		width: 300px;
	}
}
