#easy_servicebar {
  $servicebar-item-padding: 20px;
  $servicebar-component-background: mix($color-background,$color-foreground);//darken($color-foreground,3%);
  $servicebar-component-border: $color-border;//darken($color-foreground, 10%);
  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;
    padding: $servicebar-item-padding 0;
    position: relative;
    &+li{
      border-top: 1px solid rgba($color-border-minor,0.7);
    }
    & > a{
      &[class^=icon] {
        font-size: 2em;
        color: $color-service-text;
        &:hover{
          color: $color-negative;
        }
      }
      span{
        font-size: 0.375em;
        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%;
      }
    }

  }
  &_component {
    background-color: $servicebar-component-background;
    border-color: $servicebar-component-border;
    //overflow: hidden;
    &_beak{
      position: absolute;
      right: -$servicebar-width - 1;
      width: $servicebar-width;
      font-size: 2em;
      text-align: center;
      padding: ($servicebar-item-padding - 1) 0;
      margin-top: -$servicebar-item-padding - 1;
      background: $color-foreground;
      @include triangle-right(0.5*$gap, $servicebar-component-background, $servicebar-component-border, 1.5*$gap + $box-padding);
      &:after{
        right: auto;
        left: - 1px;
      }
      &:before{
        right: auto;
        left: 0;
      }
      @include gradient-horizontal($color-foreground,lighten($servicebar-component-background,2%));
      a{
        color: $color-negative;//darken($servicebar-component-border,25%);
      }
    }
    &_body{
      padding: $gap;
      @extend %absolute;
      word-wrap: break-word;
      .hint{
        text-align: center;
      }
      .servicebar-content{
        @extend %jqui-widget-content-reset;
        @extend %absolute;
        bottom: $toolbar-height + 1;
        padding: $gap;
        right: 0;//-$scrollbar-width;
        border-top: 1px solid $servicebar-component-border;
        top: 95px;
        background:mix($color-background,$color-foreground);
        &#easy_im_inline_message_history{
          top: 40px;
          bottom: 109px;
        }
        &#easy_contacts_toolbar_content{
          top: 50px;
        }
        &#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;
        }
        .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;
        background: $color-foreground;
        //@extend %box-shadow-minor;
        [class*='button']{
          margin-bottom: 0;
        }

      }
      .to-do-list + .to-do-list{
        margin-top: $gap;
      }
      //.ui-sortable, .to-do-list, .list{
      //  background: $color-foreground;
      //  border: 1px solid $color-border;
      //  ul{
      //    padding: 0;
      //  }
      //}
      .ui-state-default, .list-item{
        background: $color-foreground;
        border: 1px solid transparent;
        padding: 0.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;
          &+a{
            @extend %input-button-absolute;
          }
        }
      }

    }
  }

}
