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

@include export-module('co-transaction-search-result-layout') {
  :host.active {
    background-color: lightblue;
  }
  .co-transaction-search-result {
    width: $tp-co-transaction-search-result-width;
    .transaction-search-result-content-tiles-wrapper {
      display: flex;
      flex-basis: 100%;
      flex-wrap: wrap;
      padding: $tp-transaction-tiles-wrapper-padding;
      column-gap: $tp-transaction-tiles-wrapper-column-gap;
      row-gap: $tp-transaction-tiles-wrapper-row-gap;

      &.fullscreen {
        justify-content: start;
      }

      &.sidebar {
        justify-content: center;
        .transaction-tile {
          width: $tp-transaction-tile-width-small;
        }
      }
      .transaction-tile {
        width: $tp-transaction-tile-width;
        @media(max-width: 1340px) {
          width: $tp-transaction-tile-width-tablet;
        }
        @media(max-width: 992px) {
          width: $tp-transaction-tile-width-mobile;
        }
        @media(max-width: 600px) {
          width: $tp-transaction-tile-width-small;
        }
      }
    }

    .pagination {
      padding: 0 10px;
    }

    .empty-state-wrapper {
      display: flex;
      justify-content: center;
      padding-bottom: 20px;
    }
    .transaction-extended-search-result-tile-wrapper {
      display: flex;
      flex-direction: column;
      gap: 45px;
    }
  }

  .actions-wrapper {
    display: flex;
    align-items: center;
    margin: 5px 25px 10px;

    co-input-checkbox {
      margin-right: 20px;
    }
  }
}