/*-------------- info-panel -----------------*/
.info-panel-wrap{
  margin-bottom: 24px;
  position: relative;
  z-index: 12;
}

.info-panel{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 21px 22px 20px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 4px 0 #dbe4f9;
  @include font(normal, normal, rem(14px), 1.57, #686b83);
  position: relative;
  z-index: 2;

  &__content{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
  }

  &__info{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    max-width: calc(100% - 30px);
  }

  &__title{
    font-weight: 600;
    margin-right: 9px;
  }

  &__title_thin{font-weight: normal;}

  &__item{
    display: inline-flex;
    align-items: center;
    position: relative;
  }

  &__item:not(:last-child){
    padding-right: 14px;
    margin-right: 11px;
  }

  &__item:not(:last-child)::after{
    content: '';
    display: inline-block;
    width: 1px;
    height: 15px;
    background: #979797;
    position: absolute;
    @include top-center;
    right: 0;
  }

  &__val{
    display: inline-flex;
    align-items: center;
  }

  &__val_grey{color: $color-grey;}

  &__bold{font-weight: 600;}

  &__icon{
    display: inline-flex;
    vertical-align: middle;
    position: relative;
    cursor: pointer;

    .tooltip{
      display: none;
      width: 250px;
      position: absolute;
      left: 100%;
      top: -10px;
      margin-left: 8px;
    }
  }

  &__icon:hover .tooltip,
  &__icon .tooltip.active{
    display: inline-table;
  }

  .icon{
    vertical-align: middle;
    margin-left: 3px;
  }

  &__val .icon{margin-left: 8px;}
  &__val .icon:first-child{
    margin-left: -4px;
    margin-right: 8px;
  }

  &__val .select .icon,
  &__val .select .icon:first-child{
    margin: 0;
  }

  .ic-shared{
    width: 18px;
    height: 17px;
    margin-left: 3px;
  }

  .ic-help,
  .ic-info{
    width: 16px;
    height: 16px;
  }

  .ic-plug{
    width: 25px;
    height: 15px;
  }

  .ic-robot{
    width: 26px;
    height: 25px;
  }

  .select{
    display: inline-block;
    vertical-align: middle;

    &__head-arr .icon{
      vertical-align: top;
    }
  }

  &__item_no-indent:not(:last-child){
    padding-right: 0;
    margin-right: 5px;
  }

  &__item_no-indent:not(:last-child)::after{
    display: none;
  }

  &__shared{
    position: relative;
    cursor: pointer;
  }

  .info-popup{
    display: none;
    width: 395px;
    position: absolute;
    top: calc(100% + 4px);
    left: calc(100% - 30px);
    z-index: 2;
  }

  &__choose,
  &__switch{
    display: flex;
    align-items: center;
  }

  &__switch{
    margin: 3px 0;
  }

  &__switch-label{
    @include font(normal, normal, rem(14px), 1.57, #5d6177);
    margin-right: 7px;
  }

  &__shared.active .info-popup{
    display: inline-block;
  }

  &__btn{
    margin-right: 20px;
  }
}

.info-panel-choose{
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  &__item{
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    margin-right: 23px;
  }

  &__title{
    @include font(normal, 600, rem(14px), 1.57, $color-dark-grey);
    margin-right: 12px;
  }

  .select{margin-left: 0;}
}

.info-panel-menu{
  position: absolute;
  top: 20px;
  right: 6px;

  &__btn .icon{
    margin: 0;
  }

  &__popup{
    width: auto;
    // max-width: 226px;
    border-radius: 4px;
    background: #fff;
    box-shadow: -10px 9px 21px 0 rgba(128, 152, 213, 0.08);
    border: solid 1px rgba(172, 178, 195, 0.5);
    padding: 7px 0;
    margin: -3px -19px 0 0;
    text-align: left;
    position: absolute;
    right: 100%;
    top: 100%;
    z-index: 10;
  }

  &__popup.active,
  &:hover &__popup{
    display: block;
  }


  &__item{
    display: flex;
    // justify-content: space-between;
    align-items: center;
    padding: 5px 20px;
    @include font(normal, normal, rem(14px), 1.57, $color-dark-blue);
    cursor: pointer;
  }

  &__item.disable .icon{
    fill: $color-light-grey;
  }

  &__icon{
    width: 30px;
    height: 30px;
    margin-right: 10px;
  }

  &__text{
    // width: calc(100% - 40px);
    white-space: nowrap;
  }

  &__item:hover{
    background: $color-sort-grey;
    color: $color-dark-blue;
    text-decoration: none;
  }

  &__top,
  &__bottom{
    padding: 8px 0;
  }

  &__bottom{
    border-top: 1px solid rgba(172, 178, 195, 0.5);
  }

  &__item.disable{color: $color-light-grey;}
  &__item.disable:hover{background: transparent; cursor: auto;}
}

@media (max-width: 767px) {
  .info-panel{
    .select{
      margin-top: 3px;
      margin-bottom: 3px;
    }
  }

  .info-panel-choose{
    width: 100%;

    &__item{margin-right: 0;}

    &__title{
      min-width: 92px;
    }
  }
}