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

@include export-module('co-transaction-article-text-overview-layout') {
  .co-transaction-article-text-overview {
    .button-wrapper {
      display: flex;
      flex-direction: row;
      column-gap: $tp-transaction-article-text-overview-buttons-column-gap;
      justify-content: flex-end;
    }
    .dialog-content {
      min-width: 350px;
      min-height: 200px;
    }
  }
  .article-text-overview-article-text-wrapper {
    font-family: $tp-transaction-article-text-overview-font-family;
    font-size: $tp-transaction-article-text-overview-font-size;
    display: flex;
    flex-direction: row;
    background-color: white;
    border: $tp-transaction-article-text-overview-text-border;
    border-width: $tp-transaction-article-text-overview-text-border-width;
    box-shadow: $tp-transaction-article-text-overview-text-shadow-box;
    border-radius: $tp-transaction-article-text-overview-border-radius;
    justify-content: $tp-transaction-article-text-overview-justify-content;
    align-items: center;
    padding-right: 10px;
    .article-text-description-wrapper {
      display: flex;
      width: 100%;
      align-items: $tp-transaction-article-text-overview-align-items;
      column-gap: $tp-transaction-article-text-overview-column-gap;
    }
    .index {
      padding: 10px;
      background-color: $tp-transaction-article-text-overview-index-background-color;
      width: 20px;
    }
    .text {
      max-height: 150px;
      overflow: hidden;
    }
    .delete-icon {
      cursor: pointer;
      width: $tp-transaction-article-text-overview-delete-icon-size;
      height: $tp-transaction-article-text-overview-delete-icon-size;
    }
    &.selected {
      background-color: $tp-transaction-article-text-overview-selected-background-color;
    }
    &:hover {
      background-color: $tp-transaction-article-text-overview-hover-background-color;
    }
  }
  .article-text-overview-article-text-wrapper.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);
  }

  .article-text-overview-article-text-wrapper.cdk-drag-placeholder {
    opacity: 0.3;
  }

  .bold {
    font-weight: bold;
  }

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

  .article-text-drag-drop-list.cdk-drop-list-dragging, .article-text-overview-article-text-wrapper.cdk-drag {
    //transition: transform 200ms cubic-bezier(0, 0, 0.2, 1);
  }

  .draggable-item:last-child {
    border: none;
  }
}