@include export-module('cc-transaction-invoice-check-order-tile-layout') {
  .co-transaction-invoice-check-order-tile {


    .column {
      display: flex;
      flex-direction: row;
      gap: 10px;
      justify-content: space-between;
    }
    .row {
      display: flex;
      flex-direction: row;
      width: 100%;
      gap: 1em;
      .center {
        padding-left: 3em;
        gap: 2em;
      }
    }
    .grid-wrapper {
      width: 100%;
      max-height: 600px;
      overflow: auto;
    }
    .transaction-tile-wrapper {
      width: $tp-co-transaction-invoice-check-tile-width;
      max-width: $tp-co-transaction-invoice-check-tile-max-width;
      height: $tp-co-transaction-invoice-check-tile-height;
      padding: $tp-co-transaction-invoice-check-tile-padding;
      box-shadow: $tp-co-transaction-invoice-check-tile-box-shadow;
      border-width: $tp-co-transaction-invoice-check-tile-border-width;
      border-style: solid;
      border-color: $tp-co-transaction-invoice-check-tile-border-color;
      border-radius: $tp-co-transaction-invoice-check-tile-border-radius;
      display: flex;
      flex-direction: column;
      .tile {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .tile-header {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          gap: 0.5em;
        }
        .tile-upper-right{
          display: flex;
          flex-direction: column;
          gap: 5px;
          .co-icon {
            width: $tp-co-transaction-invoice-check-tile-icon-width;
            height: $tp-co-transaction-invoice-check-tile-icon-height;
          }
        }
        .tile-footer {
          align-items: center;
          display: flex;
          justify-content: space-between;
          flex-direction: row;
          gap: 0.5em;
          .tile-bottom-left {
            display: flex;
            align-items: center;
            gap: 10px;
            .co-icon {
              width: $tp-co-transaction-invoice-check-tile-icon-width;
              height: $tp-co-transaction-invoice-check-tile-icon-height;
            }
          }
          .value {
            span {
              font-size: $tp-co-transaction-invoice-check-tile-footer-font-size;
            }
          }
        }

        .header {
          display: flex;
          flex-direction: row;
          align-items: center;
          span {
            min-width: 6em;
          }

        }
      }
    }
  }
}