@include export-module('co-purchase-confirmation-lines-layout') {
  .co-purchase-confirmation-lines {
    font-family: $tp-co-purchase-confirmation-font-family;
    font-size: $tp-co-purchase-confirmation-font-size;
    display: flex;
    flex-direction: column;
    .confirmation-button-wrapper {
      display: flex;
      align-self: flex-end;
      .co-icon {
        cursor: pointer;
        width: $tp-co-purchase-confirmation-icon-size;
        height: $tp-co-purchase-confirmation-icon-size;
      }
    }
    .purchase-confirmation-linked-color {
      width: $tp-co-purchase-confirmation-linked-color-width;
      height: 100%;
    }
  }
  draggable-confirmation-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-confirmation-line {
    display: flex;
    align-items: center;
  }

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

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

  .draggable-confirmation-line:last-child {
    border: none;
  }

  .purchase-confirmation-lines-drag-drop-list.cdk-drop-list-dragging .draggable-confirmation-line:not(.cdk-drag-placeholder) {
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
  }
  .purchase-confirmation-lines-drag-drop-list {
    padding: 30px 15px;
    background: #FFF;
    border-radius: 5px;
  }
  .purchase-confirmation-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .purchase-confirmation-line-drag-handle.co-icon {
    cursor: grab;
    width: $tp-co-purchase-confirmation-drag-handle-width;
    height: $tp-co-purchase-confirmation-drag-handle-width;
  }
  .draggable-purchase-confirmation-line {
    font-family: $tp-co-purchase-confirmation-font-family;
    font-size: $tp-co-purchase-confirmation-font-size;
    height: $tp-co-purchase-confirmation-height;
    border-width: $tp-co-draggable-purchase-confirmation-border-width;
    border-style: solid;
    border-color: $tp-co-draggable-purchase-confirmation-border-color;
    border-radius: $tp-co-draggable-purchase-confirmation-border-radius;
    padding: $tp-co-draggable-purchase-confirmation-padding;
    position: relative;
    .link-button {
      cursor: pointer;
      text-align: center;
      vertical-align: middle;
      position: absolute;
      right: $tp-co-draggable-purchase-confirmation-link-right;
      top: $tp-co-draggable-purchase-confirmation-link-top;
      co-button {
        width: $tp-co-draggable-purchase-confirmation-link-icon-size;
        height: $tp-co-draggable-purchase-confirmation-link-icon-size;
      }
    }
    .draggable-color-drag {
      position: absolute;
      left: $tp-co-draggable-purchase-confirmation-color-right;
      height: 100%;
      top: $tp-co-draggable-purchase-confirmation-color-top;
      display: flex;
      align-items: center;
      .color-drag {
        height: 100%;
        width: $tp-co-draggable-purchase-confirmation-color-width;
        border-radius: $tp-co-draggable-purchase-confirmation-color-border-radius;
      }
    }
    .draggable-content-line {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
    }
    .draggable-description {
      font-size: $tp-co-draggable-purchase-confirmation-description-font-size;
      height: $tp-co-draggable-purchase-confirmation-description-height;
      line-height: $tp-co-draggable-purchase-confirmation-description-height;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: $tp-co-draggable-purchase-confirmation-description-padding;
    }
    .draggable-top-line {
      display: flex;
      flex-direction: column;
      gap: $tp-co-draggable-purchase-confirmation-top-line-gap;
    }
    .draggable-bottom-line {
      display: flex;
      justify-content: space-between;
      > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: $tp-co-draggable-purchase-confirmation-bottom-line-gap;
      }
      label {
        font-size: $tp-co-draggable-purchase-confirmation-bottom-label-font-size;
        color: $tp-co-draggable-purchase-confirmation-bottom-label-font-color;
      }
    }
  }

  .purchase-confirmation-header {
    font-family: $tp-co-purchase-confirmation-header-font-family;
    font-size: $tp-co-purchase-confirmation-header-font-size;
    font-weight: $tp-co-purchase-confirmation-header-font-weight;
    height: $tp-co-purchase-confirmation-header-height;
    display: flex;
    align-items: center;
    gap: $tp-co-purchase-confirmation-column-gap;
  }
  .purchase-confirmation-drag-handle {
    display: flex;
    flex-shrink: 0;
    width: $tp-co-purchase-confirmation-drag-handle-width;
  }
  .purchase-confirmation-quantity {
    display: flex;
    justify-content: flex-end;
    width: $tp-co-purchase-confirmation-quantity-width;
  }
  .purchase-confirmation-article-nr {
    width: $tp-co-purchase-confirmation-article-nr-width;
  }
  .purchase-confirmation-description {
    width: $tp-co-purchase-confirmation-description-width;
  }
  .purchase-confirmation-date {
    width: $tp-co-purchase-confirmation-date-width;
  }
  .purchase-confirmation-price {
    display: flex;
    justify-content: flex-end;
    width: $tp-co-purchase-confirmation-price-width;
  }
  .purchase-confirmation-link-button {
    display: flex;
    justify-content: center;
    width: $tp-co-purchase-confirmation-link-button-width;
  }
}