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

app-point-log-list {
  #point-log-list {
    .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;
        }
      }
    }
  }

  .mat-tab-group,
  .mat-tab-body-wrapper,
  .tab-content {
    flex: 1 1 auto;
    max-width: 100%;
  }

  .service-center-table {
    flex: 1 1 auto;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    overflow: auto;
    -webkit-overflow-scrolling: touch;

    .mat-header-row {
      min-height: 64px;
    }

    .user {
      position: relative;
      cursor: pointer;
      height: 84px;
    }

    .mat-cell {
      min-width: 0;
      display: flex;
      align-items: center;
    }

    .mat-column-id {
      flex: 0 1 84px;
    }

    .mat-column-image {
      flex: 0 1 84px;

      .product-image {
        width: 52px;
        height: 52px;
        border: 1px solid rgba(0, 0, 0, 0.12);
      }
    }

    .mat-column-buttons {
      flex: 0 1 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%;
    }
  }
}