@import "variables";

.fas.fa-arrows {
  cursor: move;
}

.cdk-drag-placeholder {
  opacity: 0;
}

.cdk-drag-animating {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.cdk-drop-list-dragging sm-card2:not(.cdk-drag-placeholder) {
  //transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.actions-container {
  position: absolute;
  right: 10px;
  top: 0;
  width: 0;
  padding-left: 100px;

  .actions {
    font-size: 16px;
    display: flex;
    flex-direction: row-reverse;

    i {
      margin-right: 16px;
      opacity: 0.8;

      &:hover {
        opacity: 1;
      }

      &:first-of-type {
        margin-right: 0;
      }
    }
  }
}

#experiment-details-container {
  overflow: auto;
  height: 100%;
  padding: 0 24px;
  max-width: 100%;
  min-height: 60px;
  display: flex;
  flex-direction: row;
  background: white;
  align-content: flex-end;

  al-drawer {
    height: calc(100% - 16px);
    align-self: flex-start;
    background: white;
    font-size: 14px;
    margin-right: 4px;
    width: 100%;
    transition: width 0.4s ease;
  }  .limit-message-container {
       width: 360px;
       flex: 0 0 360px;
       display: flex;

       .limit-message {
         display: flex;
         flex-direction: column;
         align-items: center;
         padding: 24px 48px;
         text-align: center;

         i {
           color: $info-color
         }
       }
     }

  ::ng-deep .fixed-width {
    height: 100%;
  }

  sm-card2 {
    display: block;
    min-width: 455px;
    height: 100%;
  }

  ::ng-deep .drawer-container {
    height: 100%;

    .al-card {
      height: 100%;

      .card-container {
        display: flex;
        flex-direction: column;
        border-radius: 4px 0 0 4px;
        overflow: hidden;
        height: 100%;

        .card-body {
          padding: 0 !important;
          height: 100%;
        }
      }
    }
  }
}
