#easy_servicebar {
  $servicebar-item-height: $topmenu-height + 1.5*$gap;
  //@extend %material__elevation--depth_1;
  background-color: $color-service-background;
  border-left: 1px solid $color-service-border;
  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  li {
    text-align: center;
    position: relative;
    height: $servicebar-item-height;
    @extend %pseudo-after;
    @extend %flex;
    @extend %justify-content-center;
    @extend %align-items-center;
    #easy_instant_messages_toggle + #easy_servicebar_component_beak {
      line-height: 91px;
      margin-top: initial !important;
    }
    &+li{
      &:after{
        @extend %absolute;
        bottom: inherit;
        left: $gap;
        right: $gap;
        border-top: 1px solid $color-service-border;
      }
    }
    & > a{
      &[class^=icon] {
        //@extend %inline-flex;
        @include smallest;
        display: inline-block;

        &:before{
          font-size: 2em;
          display: block;
        }
        color: $color-service-text;
        text-decoration: none;
        text-transform: uppercase;
        &:hover{
          color: $color-negative;
        }
      }
      span{
        font-weight: bold;
        background: $color-negative;
        border: 1px solid darken($color-negative,5%);
        text-align: center;
        width: 2*$gap;
        line-height: $gap;
        color: white;
        position: absolute;
        left: 50%;
        margin-left: -$gap;
        top: 100%;
      }
    }

  }

  input,textarea{
    border-color: $color-input-border;
  }
  &_component {
   // @include gradient-horizontal(rgba($servicebar-component-background,.95),$servicebar-component-background);
    background: $servicebar-component-background;
    border-color: $servicebar-component-border;
    @extend %material__elevation--depth_2;
    //@include box-shadow( -.25*$shade-width 0 .25*$shade-width 0 rgba($black,0.125));
    //overflow: hidden;
    &_beak{
      @extend %material__elevation--depth_2;
      position: absolute;
      right: -$servicebar-width - 1;
      width: $servicebar-width;
      font-size: 2em;
      height: $servicebar-item-height + 8;
      margin-top: -$box-padding + 4;
      background: $servicebar-component-background;
      //border: 1px solid $servicebar-component-border;
      //border-left: none;
      //@include triangle-right(0.5*$gap, $servicebar-component-content-background, $servicebar-component-border, 1.5*$gap + $box-padding);
      @extend %flex;
      @extend %justify-content-center;
      @extend %align-items-center;
      @extend %pseudo-after;
      &:after{
        position: absolute;
        top: 0;
        bottom: 0;
        left: -.5*$gap;
        right:100%;
        background: $servicebar-component-background;
      }
      //@include gradient-horizontal($color-foreground,lighten($servicebar-component-background,2%));
      a{
        color: $color-negative;//darken($servicebar-component-border,25%);
      }
    }
    &_body{
      @extend %absolute;
      padding: 1.5*$gap;
      word-wrap: break-word;
      h3{
        color: $color-service-background;
      }
      .hint{
        text-align: center;
        color: $color-service-background;
      }
      .servicebar-content{
        @extend %jqui-widget-content-reset;
        @extend %absolute;
        //@extend %material__elevation--depth_2;
        @extend %border-radius;
        bottom: $toolbar-height + 1;
        padding: 1.5*$gap;
        //margin-right: 1.5*$box-padding;
        right: 0;//-$scrollbar-width;
        //border-top: 1px solid $servicebar-component-border;
        top: 95px;
        //background: $servicebar-component-foreground;
        &#easy_im_inline_message_history{
          top: 60px;
          bottom: 109px;
        }
        &#easy_contacts_toolbar_content{
          top: $form-input-height + 2*$gap;
          #easy_contacts_toolbar_list{
            @extend %box-appearance;
            border: none;
          }
        }
        &#easy_issue_timer_notify_container{
          top:0;
          margin-top: -1px;
          bottom: 0;
        }
        &.to-do-lists{
          border: none;
          top: 0;
        }
        &.activity-feed{
          border: none;
          top: 40px;
        }
        &.ps-active-y{
          padding-right: 2*$gap;
        }
        .ps-scrollbar-y{
          &-rail{
            opacity: 1;
            z-index: 1;
            right: .5*$gap !important;
            margin: 1.5*$gap 0;
          }
        }
        .easy-knowledge-indicator{
          color: $color-important;
        }
      }
      .easy-to-do-lists-item-new-form{
        padding: 0 $gap;
      }
      p{
        margin-bottom: $gap;
      }
      .header{
        background: none;
        border: none;
        padding: 0.5*$gap;
        &, a{
          color: $color-text;
        }
      }
      .servicebar-actions{
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        //border-top: 1px solid $servicebar-component-border;
        padding: $gap;
        @extend %toolbar;
        @extend %material__elevation--inline_up;
        background: $servicebar-component-foreground;
        //@extend %box-shadow-minor;
        [class*='button']{
          margin-bottom: 0;
        }

      }
      .to-do-list + .to-do-list{
        margin-top: 1.5*$gap;
      }
      //.ui-sortable, .to-do-list, .list{
      //  background: $color-foreground;
      //  border: 1px solid $color-border;
      //  ul{
      //    padding: 0;
      //  }
      //}

      .ui-state-default, .list-item{
        background: $servicebar-component-foreground;
        border: 1px solid transparent;
        padding: 1.5*$gap;
        &+li{
          border-top: 1px solid $color-border-minor;
        }
        &:hover{
          border-color: $color-important;
          border-style: dashed;
        }
      }
      .list-item-text{
        overflow: hidden;
      }
      .easy-freetext-search{
        margin-bottom: $gap;
        position: relative;
        input{
          @extend %input-block;
          @extend %box-appearance;
          &+a{
            @extend %input-button-absolute;
          }
        }
      }

    }
  }

}
