@import "../../../style/mixin";

@include export-module('co-transaction-lines-layout') {
  .co-transaction-lines {
    .add-text-button {
      height: 25px;
      width: 25px;
      margin-left: 20px;
      cursor: pointer;
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;

      co-icon {
        height: 15px;
        width: 15px;
      }
    }
  }

  draggable-transaction-line.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);
  }

  .draggable-transaction-line {
    display: flex;
    align-items: center;
    position: relative;
  }

  .draggable-transaction-line.cdk-drag-placeholder {
    opacity: 0.3;
  }

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

  //.transaction-lines-drag-drop-list.cdk-drop-list-dragging, .draggable-transaction-line.cdk-drag:not(.cdk-drag-placeholder) {
  //  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1);
  //}

  .draggable-transaction-line:last-child {
    border: none;
  }
  .transaction-lines-drag-drop-list.cdk-drop-list-dragging .draggable-transaction-line:not(.cdk-drag-placeholder) {
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
  }

  .transaction-line-drag-handle {
    cursor: grab;
    width: $tp-transaction-lines-drag-handle-width;
    height: $tp-transaction-lines-drag-handle-height;
    visibility: hidden;
    position: absolute;
    left: 0;
    top: calc(50% + -1px);
    z-index: 19;
    display: flex;
    transform: translate(0, -50%);
    &.show {
      visibility: visible;
    }
    &.co-icon {
      svg {
        height: 20px;
      }
      &:after {
        content: '';
        position: absolute;
        height: 100%;
        background: rgba(0, 0, 0, 0.1);
        width: $tp-transaction-lines-drag-handle-width;
        top: 0;
        left: 0;
      }
    }
  }
}