/* 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. */
.project_list{
  position: relative;
  @include flexbox;
  @include justify-content(space-between);
  &:after{
    content: "";
    flex: auto;
  }
}

.card-container{
  width: 100%;
  margin-bottom: $grid-gutter-width * 2;
  // Small devices (landscape phones, 576px and up)
  @include media-breakpoint-up(sm){
    width: calc(100%/2);
   }
  // Medium devices (tablets, 768px and up)
  @include media-breakpoint-up(md){
    width: calc(100%/3);
  }
  // Large devices (desktops, 992px and up)
  @include media-breakpoint-up(lg){
    width: calc(100%/4);
  }
  // Extra large devices (large desktops, 1200px and up)
  @include media-breakpoint-up(xl){
    width: calc(100%/5);
  }
  // Extra large devices (large desktops, 1400px and up)
  @include media-breakpoint-up(xxl){
    width: calc(100%/6);
   }
   // Extra large devices (large desktops, 1600px and up)
  @include media-breakpoint-up(xxxl){
    width: calc(100%/7);
   }
}

.card-item{
  margin: 0 auto;
  padding: $grid-gutter-width;
  max-width: 216px;
  height: 275px;
  cursor: pointer;
  @include flex-direction(column);
  @include transition(all .25s ease);
  &-move{ @include transition(all 600ms ease-in-out 50ms); }
  &-enter-active{ @include transition(all 600ms ease-out); }
  &-leave-active{
    position: absolute;
    opacity: 0;
    z-index: 0;
    @include transition(all 10ms ease-in);
  }
  &-enter, &-leave-to{ opacity: 0 }
  &-enter{ @include transform(scale(0.9)); }

  &:hover {
    box-shadow: 0 2px 10px 0 rgba($color-black, .3);
  }
}

.new-project-item{
  padding: 0;
  width: 216px;
  height: 275px;
  position: relative;
  overflow: hidden;
  @include flexbox;
  @include align-items(center);
  @include justify-content(center);
  &__card-container{
    padding: 0;
    width: 60px;
    height: 60px;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 7px;
    box-shadow: 0 2px 10px 0 rgba($color-black,.1);
    overflow: hidden;
    z-index: 1;
    @include flexbox;
    @include align-items(center);
    @include justify-content(center);
    @include transition(all ease-in-out .35s);
    @include transform(translate(-50%, -50%));
    .svg-icon{ fill: $color-primary; }
    &:hover{ cursor: pointer; }
    &.active{
      height: 99%;
      width: 100%;
      background: $color-white;
      border-radius: 0;
      box-shadow: none;
      opacity: 1;
      .new-project-item{
        &__picto-container{
          opacity: 0;
          z-index: 0;
        }
        &__edit-container{
          opacity: 1;
          z-index: 1;
        }
      }
    }
  }
  &__title{
    margin-top: 20px;
    position: absolute;
    bottom: 55px;
    color: $color-primary;
    font-weight: 500;
    @include font-size(14px);
  }
  &__picto-container{
    height: 100%;
    width: 100%;
    background: $color-white;
    opacity: 1;
    z-index: 1;
    @include flexbox;
    @include align-items(center);
    @include justify-content(center);
    @include transition(all ease .25s);
  }
  &__edit-container{
    padding: 20px;
    padding-right: 15px;
    width: 100%;
    height: 100%;
    position: absolute;
    background: $color-white;
    opacity: 0;
    z-index: 0;
    @include flexbox;
    @include flex-direction(column);
    @include justify-content(space-between);
    @include transition(opacity .25s ease .25s, z-index ease .25s);
    .base-input-text-material{
      margin: 0;
      input{ width: 100% !important; }
    }
    &__header{
      @include flexbox;
      @include justify-content(space-between);
      span{
        color: $color-primary;
        font-weight: 500;
        @include font-size(14px);
      }
      svg:hover{ cursor: pointer; }
    }
    &__footer{
      .btn{ min-width: 104px; }
    }
  }
}

.card-bd{
  padding: 0;
  @include flexbox;
  @include flex-direction(column);
  @include justify-content(flex-start);
  &__bg{
    height: 4px;
  }
  &__header{
    height: 25px;
    position: absolute;
    top: 6px;
    right: 0;
    left: 0;
    z-index: 1;
    @include flexbox;
    @include align-items(center);
    @include justify-content(space-between);
    .base-button-option__tool{
      margin-right: 6px;
      margin-top: 4px;
    }
  }
  &__tool{
    position: relative;
    &:hover{ cursor: pointer; }
    &:after{
      margin-left: -12.5px;
      margin-top: -12.5px;
      width: 25px;
      height: 25px;
      content: '';
      display: inline-block;
      position: absolute;
      left: 50%;
      top: 50%;
      background-color: $color-primary;
      border-radius: 50%;
      @include transform(scale(0));
      @include transition(.15s linear all);
    }
  }
  &__menu{
    position: absolute;
    top: 35px;
    left: -120px;
    background: $color-white;
    border: 1px solid $border-color;
    border-radius: 3px;
    box-shadow: $bd-box-shadow;
    text-align: left;
    ul{
      margin: 0;
      padding: 0;
      list-style-type: none;
      li{
        padding: $grid-gutter-width;
        width: 150px;
      }
    }
  }
  &__body{
    height: calc(100% - 79px);
    flex: 1 0 auto;
    flex-direction: column;
    @include flexbox;
    @include align-items(center);
    @include justify-content(space-around);
    &__img{
      height: calc(100% - 79px);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      background-color: #F7F7F7;
      img{
        object-fit: cover;
        width: 100%;
        height: 100%;
      }
      .card-bd__picto-container{
        svg{
          .icon-dark-color{
            fill: var(--dark-color);
          }
          .icon-color{
            fill: var(--color);
          }
          .icon-light-color{
            fill: var(--light-color);
          }
        }
      }
    }
    &__title{
      width: 100%;
      height: 79px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      span{
        margin-bottom: 11px;
        position: relative;
        color: $color-primary;
        text-align: center;
      }
      &-hr{
        margin: 0 auto;
        height: 1px;
        width: 50px;
        bottom: -10px;
        background-color: #E1E1E2;
        display: block;
      }
    }
  }
  &__body-container{
    width: 100%;
    @include flexbox;
    @include align-items(center);
    @include justify-content(center);
    @include flex-direction(column);
  }
  &__image{ padding: $grid-gutter-width; }
  &__circle {
    width: 87px;
    height: 87px;
    border-radius: 100%;
    box-shadow: 0 0 10px 0 rgba($color-black,.07);
    overflow: hidden;
    @include flexbox;
    @include align-items(center);
    @include justify-content(center);
    img{
      height: 100%;
      width: 100%;
    }
  }
  &__infos-cloud{
    margin-top: 35px;
    width: 100%;
    height: 32px;
    color: $gray2;
    @include flexbox;
    @include align-items(center);
    @include justify-content(center);
    @include font-size(13px);
    &__projects{
      margin-right: 18px;
      padding-right: 23px;
      height: 100%;
      border-right: 1px solid $gray2;
      .svg-icon{ margin-right: 3px; }
    }
    &__users{
      .svg-icon{ margin-left: 9px; }
    }
  }
  &__title{
    padding: 15px 0 0 0;
    width: 100%;
    position: relative;
    color: $color-primary;
    text-align: center;
    @include font-size(14px);

    &:hover {
      text-decoration: underline;
    }
  }
  &__title--edit-mode{
    &:after{
      width: 100%;
      background-color: $color-primary;
    }
  }
  &__text-container{
    input{
      width: 100% !important;
      min-width: 0 !important;
      border: none !important;
      outline: none !important;
    }
  }
}

.project-preview{
  height: 216px;
  background: #f7f7f7;
  &-icon{
    padding-top: 12px;
    width: 100%;
    height: 100%;
    @include flexbox;
    @include align-items(center);
    @include justify-content(center);
    .svg-icon{ color: $color-primary; }
  }
}

@keyframes circle{
  0%{
    transform: scale(0);
  }
  75%{
    transform: scale(1.3);
  }
  100%{
    opacity: 0;
  }
}
