@include export-module('cc-transaction-search-tile-layout') {
  .co-transaction-search-tile {
    .co-transaction-search-tile-content {
      display: flex;
      font-family: $tp-transaction-tile-font-family;
      font-size: $tp-transaction-tile-font-size;
      line-height: $tp-transaction-tile-line-height;
      height: $tp-transaction-tile-height;
      position: relative;
      border-radius: $tp-tile-border-radius;
      padding: $tp-transaction-tile-padding;

      .transaction-tile-wrapper {
        cursor: pointer;
        width: $tp-transaction-tiles-wrapper-width;
        height: $tp-transaction-tiles-wrapper-height;
      }

      .header {
        font-weight: $tp-transaction-tile-header-font-weight;
        font-size: $tp-transaction-tile-header-font-size;
        display: flex;
        align-items: center;
        column-gap: 10px;
      }

      .text {
        text-overflow: ellipsis;
        white-space: normal;
        overflow: hidden;
        -webkit-hyphens: auto;
        hyphens: auto;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        font-size: 11px;
      }

      co-avatar {
        width: $tp-transaction-tile-avatar-width;
        height: $tp-transaction-tile-avatar-height;
        background: #F4F4F9;
        .co-image-display {
          width: $tp-transaction-tile-avatar-width;
          height: $tp-transaction-tile-avatar-height;
        }
      }

      .status-bar-wrapper {
        .co-statusbar-wrapper {
          height: auto;
          .statuses {
            gap: 1px;
          }
          .co-linear-gauge {
            .linear-gauge {
              margin: 0;
              border-radius: 0;
              min-width: 11px;
              height: 11px;
            }
          }
        }
      }
      .type-indicator {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 5px;
        border-radius: 5px 0 0 5px;
        &.color-V {
          background: #569eee;
        }
        &.color-I {
          background: #45b8bf;
        }
        &.color-S {
          background: #d0a46b;
        }
        &.color-O {
          background: #8083a3;
        }
        &.color-K {
          background: #0b378c;
        }
      }
      .total-price-vat {

      }

      .label {
        font-size: $tp-transaction-tile-font-size-small;
      }

      .value {
        display: flex;
        flex-direction: row;
        align-items: center;
        min-width: max-content;
        font-size: $tp-transaction-tile-font-size-small;
        line-height: $tp-transaction-tile-value-height;
        gap: 5px;
        co-icon {
          height: $tp-transaction-tile-icon-height;
          width: $tp-transaction-tile-icon-width;
        }
      }

      //grid
      .tile {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1.5fr 1fr;
        gap: 10px 10px;
        height: $tp-transaction-tile-content-height;
      }

      .tile-header {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        align-items: center;
      }
      .transaction-tile-avatar {
        display: flex;
        align-items: center;
        gap: 10px;
        span {
          font-weight: 600;
        }
      }
      .tile-upper-left {

      }

      .tile-upper-middle {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 5px;
        co-icon {
          width: 14px;
          height: 14px;
        }
        .text {
          line-height: 14px;
          font-weight: 600;
        }
      }

      .tile-upper-right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        position: relative;
      }


      .tile-body {
        display: grid;
        grid-template-columns: 24px 2.6fr 0fr;
        gap: 0 10px;
        align-items: center;
      }

      .tile-middle-left {
        grid-area: 1 / 1 / 2 / 2;
        display: flex;
        align-items: center;
        justify-content: center;
        co-input-checkbox {
          .checkbox {
            width: 16px;
            height: 16px;
            margin: 0;
          }
        }
        .batch-info-icon {
          height: 20px;
          width: 20px;
        }
      }

      .tile-middle-middle {
        grid-area: 1 / 2 / 2 / 3;
        overflow: hidden;
      }

      .tile-middle-right {
        grid-area: 1 / 3 / 2 / 4;
      }

      .tile-footer {
        display: flex;
        justify-content: space-between;
        gap: 5px;
        align-items: center;
        padding-left: 5px;
      }

      .tile-bottom-left {

      }

      .tile-bottom-middle {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .tile-bottom-right {

      }
      .order-info-section {
        display: flex;
        align-items: center;
        gap: 5px;
        co-icon {
          width: 14px;
          height: 14px;
          &.unlock-icon, &.lock-icon {
            position: relative;
            left: -5px;
          }
        }
      }
    }
  }
}
