@include export-module('co-transaction-line-image-and-description-layout') {
  .co-transaction-line-image-and-description {
    font-family: $tp-transaction-line-image-and-description-font-family;
    display: flex;
    align-items: $tp-transaction-line-image-and-description-align-items;
    width: 100%;
    gap: 10px;
    .transaction-line-image {
      display: flex;
      flex-basis: $tp-transaction-line-image-and-description-image-width;
      height: $tp-transaction-line-image-and-description-image-height;
      justify-content: center;
      align-items: center;
      align-self: $tp-transaction-line-image-and-description-image-align;
      flex-shrink: 0;
      &.preview {
        flex-basis: $tp-transaction-line-image-and-description-preview-image-width;
        height: $tp-transaction-line-image-and-description-preview-image-height;
      }
    }
    .payment-line-icon {
      display: flex;
      flex-basis: $tp-transaction-line-image-and-description-image-height;
      height: $tp-transaction-line-image-and-description-image-height;
      align-self: $tp-transaction-line-image-and-description-image-align;
      flex-shrink: 0;
    }

    .colorBlock {
      height: 100%;
      min-width: 5px;
    }

    .transaction-line-description {
      display: flex;
      flex-direction: column;
      row-gap: $tp-transaction-line-image-and-description-description-row-gap;
      flex-basis: 100%;
      padding: $tp-transaction-line-image-and-description-description-inner-padding;
      overflow: hidden;
      height: 100%;
      .description-wrapper {
        display: flex;
        flex-direction: row;
        column-gap: $tp-transaction-line-image-and-description-description-column-gap;
        align-items: flex-start;
        overflow: hidden;
      }
      .article-text {
        p {
          margin: $tp-transaction-line-image-and-description-article-text-margin;
          display: flex;
        }
      }
    }
    .transaction-line-description-description {
      font-weight: 600;
      overflow: auto;
      display: flex;
      flex-direction: column;
      position: relative;
      width: 100%;
      .co-transaction-default-flex-row {
        justify-content: space-between;
        align-items: flex-start;
        .co-transaction-overflow-ellipsis {
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: normal;
        }
      }
      .input-description {
        height: auto;
        input {
          margin-top: 0;
          line-height: 30px;
          padding: 0 10px;
        }
      }
      .co-icon {
        width: $tp-transaction-line-image-and-description-edit-icon-size;
        height: $tp-transaction-line-image-and-description-edit-icon-size;
        cursor: pointer;
      }
    }
    .delete-icon {
      cursor: pointer;
      height: $tp-transaction-line-image-and-description-delete-icon-size;
      width: $tp-transaction-line-image-and-description-delete-icon-size;
    }
    .article-text-wrapper {
      display: flex;
      flex-direction: row;
      width: 100%;
      justify-content: space-between;
      align-items: flex-start;

    }
    .article-text {
      font-size: $tp-transaction-line-image-and-description-article-text-font-size;
      padding: $tp-transaction-line-image-and-description-article-text-padding;
      cursor: pointer;
    }
    .configuration-text {
      padding: $tp-transaction-line-image-and-description-article-configuration-padding;
      line-height: $tp-transaction-line-image-and-description-article-configuration-line-height;
    }
    .transaction-line-article-number-wrapper {
      display: flex;
      column-gap: 5px;
      span {
        white-space: nowrap;
      }
    }
    .article-text-expand {
      max-height: $tp-transaction-line-image-and-description-article-text-max-height-show;
      transition: all .3s ease-in-out;
      padding-bottom: 0;
      &.large-article {
        max-height: $tp-transaction-line-image-and-description-article-text-max-height;
        overflow: hidden;
        transition: all .3s ease-in-out;
        padding-bottom: 0;
        .article-text {
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: normal;
        }
      }
      &.no-clamp {
        .article-text {
          -webkit-line-clamp: unset;
          overflow: visible;
        }
      }
    }
    .expand-wrapper {
      display: flex;
      align-items: center;
      padding-bottom: 5px;
      cursor: pointer;
      gap: 5px;
      .co-icon {
        width: $tp-transaction-line-image-and-description-article-text-show-more-size;
        height: $tp-transaction-line-image-and-description-article-text-show-more-size;
        margin-right: $tp-transaction-line-image-and-description-article-text-show-more-gap;
      }
      span {
        font-size: $tp-transaction-line-image-and-description-article-text-span-size;
        white-space: nowrap;
      }
    }

  }
}