@import 'src/@fuse/scss/fuse';

app-page-sites-bank-info-list {
  #bank-info {
    .top-bg {
      @include media-breakpoint('xs') {
        height: 224px;
      }
    }
    > .center {
      > .header {
        .search-wrapper {
          width: 100%;
          max-width: 480px;
          border-radius: 28px;
          overflow: hidden;
          @include mat-elevation(1);

          @include media-breakpoint('xs') {
            width: 100%;
          }

          .search {
            width: 100%;
            height: 48px;
            line-height: 48px;
            padding: 0 18px;

            input {
              width: 100%;
              height: 48px;
              min-height: 48px;
              max-height: 48px;
              padding: 0 16px;
              border: none;
              outline: none;
            }
          }
        }

        @include media-breakpoint('xs') {
          padding: 8px 0;
          height: 160px !important;
          min-height: 160px !important;
          max-height: 160px !important;
        }
      }
    }
  }

  .bank-info-table {
    color: black;
    flex: 1 1 auto;
    border-bottom: 1px solid rgba(0, 0, 0, 0.301);
    overflow: auto;
    // -webkit-overflow-scrolling: touch;

    .bankInfo {
      position: relative;
      cursor: pointer;
      // height: 84px;
    }
    .mat-cell {
      min-width: 0;
      display: flex;
      align-items: center;
    }

    //First column and header
    // .mat-header-cell:first-child,
    // .mat-cell:first-child {
    //   flex: 10%;
    // }
    // //Second column and header
    // .mat-header-cell:nth-child(2),
    // .mat-cell:nth-child(2) {
    //   flex: 30%;
    // }
    // .mat-header-cell:nth-child(3),
    // .mat-cell:nth-child(2) {
    //   flex: 20%;
    // }
    // .mat-header-cell:nth-child(4),
    // .mat-cell:nth-child(2) {
    //   flex: 15%;
    // }
    // //Last column and header
    // .mat-header-cell:last-child,
    // .mat-cell:last-child {
    //   flex: 15%;
    // }

    .mat-column-icon {
      max-width: 11%;
      // justify-content: start;
    }
    .mat-column-korName {
      max-width: 22%;
    }
    .mat-column-addMethod {
      max-width: 22%;
    }
    .mat-column-sportsEntities {
      max-width: 22%;
    }
    .mat-column-test {
      max-width: 22%;
      // justify-content: flex-end;
    }
    .mat-column-image {
      flex: 1 0 84px;

      .product-image {
        width: 52px;
        height: 52px;
        border: 1px solid rgba(0, 0, 0, 0.12);
      }
    }
    .mat-column-buttons {
      flex: 0 0 80px;
    }
    .quantity-indicator {
      display: inline-block;
      vertical-align: middle;
      width: 8px;
      height: 8px;
      border-radius: 4px;
      margin-right: 8px;

      & + span {
        display: inline-block;
        vertical-align: middle;
      }
    }

    .active-icon {
      border-radius: 50%;
    }
  }
}