/* This file is part of the BIMData Platform package.
(c) BIMData support@bimdata.io
For the full copyright and license information, please view the LICENSE
file that was distributed with this source code. */
.users-list {
  height: calc(399px + 1rem*2); //same size that .main-ifc
  overflow: hidden;
  position: relative;

  &--large {
    .users-list__header {
      padding: 8px 11px;
      height: 50px;
    }
    .users-list__body {
      height: calc(100% - 50px);
    }
  }

  &__card {
    height: 100%;
    .base-card__content{
      padding: 0;
    }
  }
  &__header {
    padding: 3px 3px 3px 9px;
    min-height: 32px;
    box-shadow: 0 2px 10px 0 rgba($color-black, .07);
    @include flexbox;
    @include align-items(center);
    @include transition(height ease .25s);

    &--large {
      padding: 8px 11px;
      height: 50px;
      box-shadow: $bd-box-shadow;
      @include flexbox;
      @include align-items(center);
    }
    .base-valid-delete {
      max-height: 32px;
      position: relative;
      right: unset;
      bottom: unset;
      @include transform(none);
    }
    .svg-icon {
      color: $color-primary;
      cursor: pointer;
    }

    &__admin {
      padding: 9px 14px;
      padding-left: 26px;

      .btn {
        margin-left: 8px;
        max-width: 115px;
        min-width: 115px;
        font-weight: 100;
        @include font-size(13px);
      }
      #users-list-tooltip {
        height: 32px;
        width: 32px;
        margin-left: 8px;
        @include flexbox;
        @include align-items(center);
        @include justify-content(center);
      }
      #users-list-icon {
        height: 32px;
        width: 32px;
        margin-right: 8px;
        @include flexbox;
        @include align-items(center);
        @include justify-content(center);

        .svg-icon {
          cursor: unset;
        }
      }
    }
    &__right-container{
      margin-left: auto;
      @include flexbox;
      @include align-items(center);
      @include justify-content(space-between);
      & > span{
        margin-left: 10px;
      }
    }
    &__search, &__invitation {
      width: 100%;
      @include flexbox;
      @include align-items(center);

      input {
        padding: 6px 12px;
        transition: all, ease 0.25s;

        &:focus {
          outline: none;
          border-color: $color-primary;

          &::placeholder {
            opacity: 0;
          }
        }
      }
    }
    &__search {
      input {
        margin-left: 18px;
        width: 100%;
        min-width: auto;
        border: 1px solid $border-color;
      }
    }
    &__invitation {
      input {
        width: calc(56% - 22px);
        min-width: auto;
        border: 1px solid $border-color;

        @include media-breakpoint-up(xl) {
          width: calc(60% - 11px);
        }
      }
      .rights-select{
        padding: 6px;
        margin-left: 11px;
        width: 24%;
        position: relative;
        border: 1px solid $border-color;
        color: $color-primary;
        cursor: pointer;

        @include flexbox;
        @include align-items(center);

        @include media-breakpoint-up(xl) {
          width: calc(40% - 11px);
        }

        .arrow-down{
          position: absolute;
          right: 2px;
          text-align: right;
          @include flexbox;
          @include align-items(center);
        }
        .check{
          .svg-icon{
            fill: #28a745;
          }
        }
        .check-cross{
          .svg-icon{
            fill: #dc3545;
          }
        }
      }
      .base-valid-delete {
        margin-left: 11px;
        width: 20%;

        @include media-breakpoint-up(xl) {
          width: 16%;
        }
      }
      .base-button-option__menu {
        overflow: hidden;
        top: 36px;
        left: 0;

        @include media-breakpoint-up(xl) {
          width: 100%;
        }

        ul{
          li{
            padding: 0 8px;
            word-break: break-word;
          }
        }
        .base-input-radio {
          margin: 0;
          width: 100%;
        }
        label {
          height: 24px;
          padding-left: 0;
          line-height: 1rem;

          &:before, &:after {
            display: none;
          }
        }
      }
    }
    .add-account{
      &.clicked{
        &:after{
          animation-name: circle;
          animation-duration: .5s;
        }
      }
    }
  }
  &__body{
    overflow-y: auto;
  }
  &__empty{
    height: 376px;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    p{
      span{
        color: $color-primary;
        font-weight: bold;
      }
    }
    .btn{
      width: 121px;
    }
  }
  &__users{
    padding: 0;
    margin: 0;
    min-height: 397px;
    max-height: 397px;
  }
  &__user{
    padding: 16px 9px 11px 12px;
    border-bottom: 1px solid rgba($color-primary,.08);
    @include flexbox;
    @include align-items(center);

    &.open-top {
      .base-button-option__menu {
        top: -75px;
      }
      .new_folder_box {
        top: -35px !important;
      }
    }
    &.role-changed {
      animation: opacityblink 2s infinite;
    }

    &__picture{
      position: relative;
      overflow: hidden;
      .circle{
        height: 38px;
        width: 38px;
        border-radius: 100%;
      }
    }
    &__datas{
      margin-left: 24px;
      color: $color-text;
      line-height: 1rem;
      .badge {
        margin-left: 19px;
        text-transform: capitalize;
      }
      & > *{
        display: inline-block;
        vertical-align: top;
      }
      p{
        margin-bottom: 0;
        @include font-size(12px);
        & > *{
          display: block;
        }
      }
      a{
        text-decoration: underline;
      }
    }
    &__name{
      color: $color-primary;
      @include font-size(13px);
    }
    &__actions{
      margin-left: auto;
      position: relative;
      cursor: pointer;
      &__menu{
        .base-button-option__menu{
          width: 184px;
          @include font-size(12px);

          @include media-breakpoint-up(sm){
            width: 184px;
          }
          @include media-breakpoint-up(lg){
            width: 134px;
          }
          @include media-breakpoint-up(xl){
            width: 184px;
          }

          li{
            text-align: right;
            line-height: 1.2;
            @include justify-content(flex-end);
          }
          .svg-icon{
            margin-left: 10px;
          }
          .new_folder_box{
            width: 125px;
            left: -126px;
            top: 8px;

            @include media-breakpoint-up(sm){
              width: 140px;
              left: -141px;
            }
            @include media-breakpoint-up(lg){
              width: 125px;
              left: -126px;
            }
            @include media-breakpoint-up(xl){
              width: 140px;
              left: -141px;
            }

            &.bg-overlay {
              &:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                display: block;
                background: $modal-backdrop-bg;
                opacity: $modal-backdrop-opacity;
              }
            }
            .base-valid-delete {
              right: 50%;
              transform: translate(50%, 50%);
            }
          }
          &__remove{
            .delete__actions{
              .svg-icon{
                margin: 0;
              }
            }
          }
          .base-valid-delete {
            .svg-icon {
              margin-left: 0;
            }
          }
        }
        .arrow-left{
          &:before{
            margin-right: auto;
            width: 0;
            height: 0;
            content: '';
            border-color: transparent $primary transparent transparent;
            border-style: solid;
            border-width: 4px 4px 4px 0;
          }
        }
      }
    }
    &__status{
      width: 10px;
      height: 10px;
      position: absolute;
      bottom: 0;
      right: 0;
      border: 1px solid $white;
      border-radius: 100%;
      box-sizing: border-box;
      &--inline{
        background: $bim-positive;
      }
      &--outline{
        background: $bim-negative;
      }
    }
  }
  &__response-resend {
    position: absolute;
    top: 0;
    background: $success;
    color: $white;
    text-align: center;
    height: 33px;
    font-size: 0.85714rem;
    padding: 10px 35px;
    width: 100%;
    z-index: 1;

    &--big {
      height: 50px;
      padding: 15px 35px;
  }

    &__close {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
    }

    &--error {
      background: $danger;
    }
  }

  &-modal {
    .close {
      position: absolute;
      right: 10px;
      top: 10px;
      z-index: 1;
    }
    &__input-mail {
      padding: 10px;
      width: 100%;
      height: 32px;
      max-width: 302px;
      border: 1px solid $border-color;

      &:focus {
        border-color: $color-primary;

        &::placeholder {
          opacity: 0;
        }
      }
    }
    .users-list {
      &__body {
        padding: 0 15px;
      }
    }
  }
}
@keyframes opacityblink{
  0%{
    opacity: 0.4;
  }
  50%{
    opacity: 1;
  }
  100%{
    opacity: 0.4;
  }
}
