@import "../../../shared/ui-components/styles/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);
}


.cdk-drag-preview {
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
  0 8px 10px 1px rgba(0, 0, 0, 0.14),
  0 3px 14px 2px rgba(0, 0, 0, 0.12);

  ::ng-deep .drawer-container {
    border-radius: 4px !important;
    padding: 0 !important;
    font-size: 14px !important;
    height: 100%;

    .display-on-hover {
      opacity: 1;
    }

    .fixed-width {
      height: 100%;

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

        .al-card {
          height: 100%;

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

            &.bordered {
              box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1) !important;
            }

            .extra-header {
              border-radius: 5px 0 0 0;
            }

            .tree-card-body {
              height: 100%;
              padding: 20px 15px 0 0;
              opacity: 0.4;

              .node {
                height: 28px;
                line-height: 28px;
                vertical-align: middle;
                margin-bottom: 1px;
                margin-top: 1px;
                font-family: "Heebo", sans-serif;
                font-weight: 500;
                color: $blue-500;
                white-space: nowrap;
              }
            }

            cdk-virtual-scroll-viewport {
              height: 100%;
            }
          }
        }
      }
    }
  }

}

.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.2;

      &:hover {
        opacity: 1;
      }

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

#experiment-details-container {
  overflow: auto;
  height: 100%;
  margin: 0 2px;
  padding: 0 30px;
  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;
  }

  ::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%;
        }
      }
    }
  }
}
