$more-search-height: 83px;
$more-service-height: 85px;
$more-base: $color-foreground;
$more-background: #50596f; //$color-text; ///$color-main;
$more-foreground: $color-foreground;
$more-color: $color-foreground;
$more-color-muted: rgba($more-color,.25);
$more-border: darken($more-background, 2%);
$more-color-icon: rgba($color-foreground,1);
$logo-width: 30px !default;
$quick-height: ($topmenu-height - $box-padding);
%topmenu-submenu {
  position: fixed;
  z-index: z($z-priority, topmenu);
  top: $topmenu-height;
  left: 0;
  right: $servicebar-width;
  background: $color-foreground;
  border-bottom: 1px solid $color-border;
  text-align: center;
}
#top{
  &__tools{
    @extend %flex-grow-1;
    @extend %flex;
    @extend %align-items-center;
    //padding: -2+$box-padding 0;
    & > div{
      padding: 0 $gap;
    }
    & > div ~ div{
      border-left: 1px solid $color-border-minor;
      padding: 0 $gap 0 $box-padding;
      margin-right: $gap;
    }
    @include respond-to(max-medium-screen) {
      & > div{ display: none; }
    }

    .easy-calendar{
      &-upcoming{
        $calendar-background: $color-background;
        $calendar-text: $color-text;
        margin-left: -$gap;
        height: 100%;
        @extend %flex;
        @extend %align-items-center;

        &__calendar{
          float: left;
          position: relative;
          &-trigger{
            font-size: $font-h1;
            margin-right: 1.5*$gap;
            color: $color-top-text;
            position: relative;

            //&:hover{
            //  color: $color-top-active;
            //}
            &.w-toggleable__trigger--active{
              @extend %pseudo-before;
              @extend %pseudo-after;
              color: $color-main;
              &:before{
                @extend %absolute;
                @include border-radius($border-radius-large $border-radius-large 0 0);
                @extend %material__elevation--depth_9;
                background: $calendar-background;
                z-index: -1;
                left: -$gap;
                right: -$gap;
                top: -$gap;
                bottom: -.5*$gap;
              }
              &:after{
                @extend %absolute;
                background: $calendar-background;
                top: 100%;
                bottom: -$gap;
                left: -$gap;
                right: -$gap;
              }
              i{
                @include icon-parent(cancel-alt);
                color: $color-negative;
              }
            }

          }
          &-content{
            display: none;
            //min-width: 320px;
            //min-height: 240px;
            padding: 0 $box-padding;

            @extend %material__elevation--depth_9;
            background: $calendar-background;
            //position: absolute;
            //left: -$gap;
            position: fixed;
            margin-left: -$gap;
            &.w-toggleable__content--active{
              display: block;
              color: $calendar-text;
            }
            @include respond-to(min-medium-screen) {
              width: 60vh;
              @include border-radius(0 $border-radius-large $border-radius-large $border-radius-large);
            }
            @include respond-to(min-menu-collapse) {
              width: $media-collapse-sidebar !important;
            }
            @include respond-to(min-xlarge-screen) {
              width: $media-collapse-medium !important;
            }
            @include respond-to(max-medium-screen) {
              margin-left: -3.5*$box-margin - 0.5*$gap - 2;
            }
            .easy-calendar-export a{
              color: $calendar-text;
              background: $color-foreground;
            }
            .easy-calendar-fc{
              margin: 0 (-$box-padding);
            }
            .fc{
              max-height: 66vh;
              overflow: auto;
              //th,td{
              //  color: $calendar-text;
              //  border-color: darken($calendar-background,10%);
              //}
              //&-state-highlight{
              //  background: darken($calendar-background,5%);
              //}
              &-agenda-gutter {
                display: none !important;
              }
              &-view-month .fc-day{
                & > div{
                  min-height: 60px !important;
                  @include respond-to(max-small-screen){
                    min-height: 45px !important;
                  }
                }
              }
              &-content{
                background: $color-foreground;
                &>.fc-agenda{
                  &>div{
                    &>div:last-child{
                      overflow-y: hidden;
                    }
                  }
                }
              }
            }
          }
        }
        &__current-time{
          font-size: $font-h3;
          margin-right: $gap;
        }
        &__current-date {
          margin-right: $gap;
        }
        &__event{
          a{
            color: $color-top-text;
          }
        }
        @include respond-to(max-menu-collapse) {
          &__current-time, &__current-date, &__event{
            display: none;
          }
        }
      }
      &-header{
        @include respond-to(max-small-screen){
          &>.splitcontent{
            display: none;
          }
          &>.toolbar{
            //padding: 0;
          }
          margin-bottom: 0 !important;
        }
      }
      &-export{
        @include respond-to(max-small-screen){
          display: none;
        }
      }
    }
  }
  &__back{
    font-size: $font-h1;
    color: $color-border;
    &-wrapper{
      @include respond-to(max-menu-collapse) {
        display: none;
      }
    }
    &:hover{
      color: $color-main;
    }
    //text-shadow: 1px 1px 1px $color-border;
    //margin-left: $box-padding;
    //margin-top: .75*$box-padding;
  }
}

#top-menu {
  background-color: $color-top-background;
  color: $color-top-text;

  @extend %flex;
  @extend %flex-wrap-nowrap;
  @extend %justify-content-space-between;
  @extend %material__elevation--depth_4;

  #logo {
    $logo-width: $sidebar-width;
    color: $color-top-text;

    @extend %flex-shrink-0;
    @include flex-basis($topmenu-height);
    @include respond-to(min-menu-collapse) {
      flex-basis: $logo-width;
      margin-right: $gap;
    }

    a {
      display: block;
      background-image: $logo-url;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: auto calc(100% - #{2*$gap});
      height: $topmenu-height - $gap;
      margin: 0 $box-padding;

      @include respond-to(min-menu-collapse) {
        height: $topmenu-height;
      }

      @include respond-to(max-menu-collapse) {
        background-image: $logo-mark-url;
        margin: 0;
      }
    }
  }

  &.collapsed{
    #logo {
      flex-basis: $servicebar-width + 2*$gap;
      a {
        background-image: $logo-mark-url;
      }
      @include respond-to(max-xsmall-screen){
        flex-basis: $servicebar-width - $gap;
      }
    }
  }

  #loggedas{
    @include order(85);
    &_controls{
      @include order(84);
      @include respond-to(max-menu-collapse) {
        display: none;
      }
      a{
        padding: 0 .5*$gap;
      }
    }
    &,&_controls {
      @extend %flex;
      @extend %align-items-center;
      white-space: nowrap;
      margin-left: $gap;

      @include respond-to(max-small-screen) {
        display: none;
      }
      a {
        color: $color-top-text;
        font-size: $font-h2;
        text-align: center;
      }
    }
    .avatar-container {
      img {
        max-height: $quick-height - 4;
        max-width: $quick-height - 4;
        margin-top: -2px;
        border: none;
        vertical-align: middle;
      }
    }
  }

  span.easy-autocomplete-tag {
    display: block;
  }
  ul{
    padding: 0;
    margin: 0;
    list-style: none;
  }
  &-fake-container {
    @include respond-to(min-medium-screen) {
      display: none;
    }
    li > a {
      padding-left: 3*$box-padding + 2 !important;
      &:before {
        left: 2.5*$box-padding + 2 !important;
      }
    }
    padding-top: 1.5*$gap !important;
    .easy-top-menu-more-toggler{
      display: none !important;
    }
    //$more-search-height: 85px;
    //$more-service-height: 130px;
    //@extend %flex-wrap-wrap;
    //display: none;
    //text-align: left;
    //border-bottom: 1px solid darken($more-background, 2%);
    //font-size: 1.2em;
    //font-weight: bold;
    ////background: mix($color-background, $color-foreground);
    //margin: 0 $gap !important;
    //padding: 2*$gap $gap !important;
    ////padding-top: 98px !important;
    //@include respond-to(max-menu-collapse) {
    //  display: flex;
    //}
    //& > li {
    //  border: none !important;
    //  & > span {
    //    float: left;
    //    line-height: 1.5*$tab-height;
    //    margin: $gap;
    //    .icon-arrow {
    //      @include icon-parent(arrow);
    //    }
    //  }
    //  //& > a {
    //  //  padding-top: 0 !important;
    //  //  line-height: 1.5*$tab-height !important;
    //  //  height: auto !important;
    //  //  border-bottom: none !important;
    //  //}
    //}
  }
  &-container {
    @include flex-grow(10);
    @extend %flex;
    @extend %flex-direction-column;
    //@extend %pseudo-after;
    //@extend %material__elevation--depth_1;
    //&:after{
    //  top: -$topmenu-height;
    //  bottom: 0;
    //  right: 0;
    //  border-right: 1px solid $color-border-minor;
    //}
    @include respond-to(max-menu-collapse) {
      display: none;
    }

    //border-left: 1px solid $color-top-border;
    float: left;
    position: fixed;
    left: 0;
    top: 0;
    padding: $box-padding;
    padding-top: $box-padding + $topmenu-height;
    z-index: -1;
    //padding-top: $box-padding;
    //top: 50%;
    //@extend %translateY-correction;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: $sidebar-width - 2*$box-padding;
    //background: $color-top-background;
    &-control{
      @extend %layout-control;
      right: .5*$box-padding;
      @include respond-to(max-menu-collapse) {
        display: none;
      }
    }
    & > ul {
      //border-right: 1px solid $color-top-border;
      display: flex;
      flex-direction: column;
      //flex: 1 0 0;
      & > li {
        position: relative;

        border-bottom: 1px solid $color-top-border;
        margin-bottom: $gap;

        &:last-child{
          border-bottom: 1px solid $color-top-border;
        }
        & > a {
          $line-height: ($topmenu-height - $gap);
          padding: 0 $line-height;
          line-height:  $line-height;
          height:  $line-height;
          color: $color-text;
          font-size: $font-size;
          background: $color-foreground;
          letter-spacing: 0.025em;
          overflow: hidden;
          text-overflow: ellipsis;
          &:hover{
            background: $color-highlight;
          }
          //border: 1px solid $color-border;
          @extend %material__elevation--depth_2;
          @include border-radius-normal;
          text-transform: uppercase;
          display: block;
          &:before{
            position: absolute;
            width: $line-height;
            line-height: $line-height;
            font-size: $box-padding;
            display: block;
            text-align: center;
            left: 0;
            top:0;
            color: $color-main;
            opacity: .8;
          }
          &.selected{
            background: $color-main;
            color: $color-foreground;
            &:before{
              color: $color-foreground;
            }
            &:hover{
              background: darken($color-main,3%);
            }
            & ~ .easy-top-menu-more-toggler{
              background: $color-main;
              &:hover{
                background: darken($color-main,3%);
              }
              &:after{
                border-left-color: $color-foreground;
              }
            }
          }
        }
        & + li {
          border-left: 1px solid rgba($color-top-border, 0.25);
        }
        .easy-top-menu-more-toggler {
          @extend %control-arrow-next;
          @extend %border-radius-half-right;
          @extend %translateY-correction;
          position: absolute;
          right: 0;
          top: 50%;
          height: 100%;
          border-left: 1px solid rgba($color-top-text,.125);
          border-right: 0;
          cursor: pointer;
          margin-left: 0;
          padding: 0 $gap;
          padding-right: 1.5*$gap;
          width: $gap;
          z-index: 1;
          background: $color-foreground;
          &:after {
            border-left-color: rgba($color-text-muted,.5);
            right: auto;
          }
          &:hover {
            background: $color-highlight;
            &:after {
              border-left-color: rgba($color-text-muted,.75);
            }
          }
          i {
            display: none;
          }
        }
        @extend %menu-tooltip;
        & > ul.menu-children {
          position: absolute;
          z-index: z($z-priority, topmenu);
          top: 0;
          left: 100%;
          left: calc(100% - 1px);
          width: 200px;
        }
      }
    }
    #top-menu.collapsed &{
      width: $servicebar-width;
      padding-left: $gap;
      padding-right: $gap;

      & > ul {
        & > li {
          & > a {
            font-size: 0;
            padding: 0 $gap;
            &:before{
              left: 50%;
              @extend %translateX-correction;
            }
          }
          .easy-top-menu-more-toggler {
            padding-left: 0;
            padding-right: 0;
            &:after{
              right: 3px;
            }
          }
        }
      }
      & > .easy-invite-colleagues__form-wrapper{
        display: none;
      }
    }
  }
  &-rich {
    @include order(99);
    &-more {
      list-style: none;
      white-space: nowrap;
      height: 100%;
      &-toggler {
        margin-left: $gap;
        height: 100%;
        width: $servicebar-width;
        position: relative;
        display: block;
        i {
          font-size: $font-h1;
          color: $color-top-text;
          width: 100%;
          height: $topmenu-height - $gap;

          @include respond-to(min-menu-collapse) {
            height: $topmenu-height;
          }
          @extend %flex;
          @extend %align-items-center;
          @extend %justify-content-center;
        }
        span {
          display: none;
          position: relative;
          top: -2px;
          @include respond-to(max-menu-collapse) {
            display: none;
          }
        }
        .left-menu-opened & {
          .icon-reorder {
            @extend %material__elevation--depth_2;
            @include icon-parent(close);
            background: $more-background;
            color: $color-negative;
            border-left-color: $more-background;
            z-index: z($z-priority,topmenu)+1;
            @extend %pseudo-after;
            &:after{
              position: absolute;
              background: $more-background;
              top: 100%;
              bottom: -.5*$gap;
              left: 0;
              right:0;
              //@include respond-to(min-menu-collapse) {
              //  top: 0;
              //  bottom: 0;
              //  left: -.5*$gap;
              //  right:100%;
              //}
            }

          }
        }
      }
      & > ul.menu-children {
        @extend %compositor-layer;
        @extend %topmenu-submenu;
        //@include gradient-horizontal(rgba($more-background,.95),$more-background);
        background: $more-background;
        @extend %material__elevation--depth_2;
        right: 0;
        bottom: -1px;
        top: $topmenu-height - $gap;
        &:before, &:after {
          left: auto;
          right: $gap;
        }
        @include respond-to(min-menu-collapse) {
          top: $topmenu-height;
        }
        @include respond-to(min-small-screen) {
          left: auto;
          width: $servicebar-component-width + $box-padding + 6;
        }
      }
      & > a {
        text-decoration: none;
      }

      &-service-container {
        @extend %material__elevation--depth_2;
        position: absolute;
        left: 0;
        height: 3*$box-padding + 4;
        width: 100%;
        bottom: 0;
        text-align: center;
        &>ul{
          @extend %absolute;
          @extend %inline-flex;
          //width: 100%;
          margin: 0 $gap;
        }
        li {
          width: 32%;
          margin-top: -1px;
          line-height: 1.25;

          @include respond-to(max-menu-collapse) {
            width: 40%;
          }
        }
        a {
          margin: $gap;
          border: 1px solid $more-color;
          @extend %border-radius;
          display: block;
          padding: 0 $gap;
          line-height: 2*$box-padding - 4;
          overflow: hidden;
          text-overflow: ellipsis;
          color: $more-color;
          &:before {
            //color: $more-color-icon;
            //width: 2*$gap;
            //text-align: center;
            //margin-right: $gap;
            display: none;
          }

        }
      }
      .top-menu-rich-more {
        &-group {
          white-space: normal;
          position: absolute;
          top: 0;
          //background: darken($color-service-background,0%);
          left: 0;
          bottom: $more-service-height;
          right: 0;
          overflow-y: scroll;
          overflow-x: hidden;
          //display: flex;
          //align-items: center;
          .ps-scrollbar {
            &-x,&-y {
              background: $more-color;
            }
          }
          &::-webkit-scrollbar-track {
            background: $more-border;
            border-color: darken($more-border, 10%);
          }
          &::-webkit-scrollbar-thumb {
            background: darken($more-border, 10%);
          }
          fieldset{
            margin: $box-padding $box-padding 0 !important;
            padding: $gap 0 0 !important;
            border-color: $more-color-muted !important;
          }
          legend{
            text-align: left;
            padding: 0 $box-padding 0 0;
            margin: 0;
            color: $more-color-muted;
            text-transform: uppercase;
            font-weight: normal;
          }
        }
        &-item {
          @extend %clearfix;
          a {
            color: $more-color;
            &:before {
              color: $more-color-icon;
              opacity: 1;
            }
            &:hover {
              &:before {
                opacity: 0.75;
              }
            }
          }
          & > li {
            @extend %box-sizing-border-box;
            display: block;
            position: relative;
            //line-height: 1.25;
            //text-align: left;
            //width: 50%;
            //float: left;
            //@include respond-to(min-small-screen) {
            //  width: 33.3%;
            //}
            //@include respond-to(min-menu-collapse) {
            //  width: 25%;
            //}
            & > span {
              display: block;
              line-height: 1.25;
              overflow: hidden;
              color: $more-color-icon;
            }
            & > a {
              //height: 1.5*$box-padding;
              //@include respond-to(min-medium-screen) {
              //  height: 2*$box-padding;
              //}
              //@include respond-to(min-large-screen) {
              //  height: 2.5*$box-padding;
              //}
              //display: block;
              //text-align: center;
              padding-left: 2.5*$box-padding;
              line-height: 2*$box-padding - 4;
              @extend %flex;
              //@extend %align-items-center;
              &:before {
                //left: 0;
                //top: 0.5*$box-padding;
                //right: 0;
                //display: block;
                @include translateX(-100%);
                position: absolute;
                left: 1.5*$box-padding + 1;
                line-height: 2*$box-padding - 4;
                font-size: $font-h1;
              }
            }
            & > .expander {
            }
            &:hover, &.open {
              @extend %menu-tooltip;
              & > ul.menu-children {
                @include respond-to(min-menu-collapse) {
                  display: block;
                }
              }
            }
            & > ul.menu-children {
              display: none;
              @extend %tooltip-content-top;
              white-space: normal;
              //padding: 0 !important;
              min-width: 0 !important;
              bottom: 3*$box-padding;
              min-height: 3.5*$box-padding;
              right: 0;
              left: 0;
              &:after{
                display: none;
              }
              &.open {
                display: block !important;
                height: auto;
              }
              ul {
                display: none;
              }
              @include small;
              & > li {
                & > a {
                  padding-left: 0.5em;
                  color: $color-main !important;
                  text-decoration: none !important;
                  text-align: center;
                  &:before {
                    display: none;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  &__quick-search{
    position: relative;
    //margin-top: -.5*$gap + 2;

    @extend %flex;
    //@include flex-basis(500px);

    input {
      display: block;
      width: 100%;
      border: 1px solid $color-border;
      padding: 1px 1.5*$gap;
      @include respond-to(min-small-screen){
        @include border-radius(5000px !important);
      }
      &:focus{
        outline: none;
      }
    }

    .easy-autocomplete-tag {
      height: auto;
      //border-bottom: 1px solid $color-border-minor;
      overflow: hidden;
      padding: 0 $gap;
      //background: rgba($color-border-minor,.1);
      font-size: $font-h3;
      background: none;
      border-color: transparent;
      @extend %border-radius-none;

      &:after{
        @extend %absolute;
        @include icon(magnifier);
        width: $box-padding;
        text-align: center;
        line-height: 1.5*$box-padding;
        font-size: $font-h2;
        @include respond-to(max-small-screen){
          left: auto;
        }
      }

      input{
        border-color: transparent;
        padding: 1px $gap;
        //margin-left: -1px;
        //margin-top: -1px;
        background-image: none;
        //background: none;
        margin-left: $box-padding;
        width: calc(100% - 12px);
        height: 1.5*$box-padding;
        line-height: 1.5*$box-padding;;
        color: $color-text-muted;
        @include respond-to(max-small-screen) {
          margin-left: 0;
          border-bottom-color: $white;
          background-color: transparent;
          padding: 1px 0;
          border-radius: 0;
          @include placeholder{
            color: $white !important;
          }
        }
        @include placeholder{
          color: $color-text-muted;
        }
        &:focus{
          @include transition(all 0.4s);
          background-color: $white;
          border-color: transparent;
          padding: 1px $gap;
          @extend %border-radius-infinite;
        }
      }

      input#search_q_autocomplete {
        // for specificity
        @include respond-to(max-small-screen) {
          @include placeholder{
            color: $white;
          }
          min-width: 5*$box-padding + 4;
        }
      }

      button{
        padding-right: $gap;
      }
    }
    .easy-autocomplete-tag {
      max-width: $sidebar-width;
    }
    i {
      display: none;
      position: absolute;
      color: $color-text;
      right: .5*$gap;
      top: 3px;
      bottom: 3px;
      font-size: $font-h1;
      line-height: $quick-height - 8;
      background: $color-foreground;

      @include respond-to(min-small-screen) {
        right: 1.5*$gap;
      }
    }
    &-container {
      @extend %flex;
      //@extend %flex-grow-max;
      @include order(80);
      @extend %justify-content-center;
      @extend %align-items-center;

      //@include respond-to(min-menu-collapse) {
      //  padding: $box-padding;
      //}

      #before-quick-search {
        margin-right: $gap;

        @extend %flex;

        a {
          font-size: $font-h2;
          line-height: $quick-height;
          color: $color-top-text;
        }
      }

      .menu-account-menu {
        display: none;
        & > li {
          float: left;
          & > a {
            @include small;
            color: $white;
          }
        }
      }
    }
  }
}

@media screen {
  #iframe-top-menu ul.menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }

  #iframe-top-menu ul.menu li {
    line-height: 36px;
    padding: 0 10px;
    display: inline;
  }
}
