@import '../../styles/common.scss';

.wrapper {
  @include boxSizing;

  height: 100%;
  display: grid;
  grid-auto-rows: min-content;
  padding: var(--list-paddings, $list-paddings);
  background-color: var(
    --explorer-background-color,
    $explorer-background-color
  );
  overflow-x: auto;

  .LoadingData {
    margin: 1rem 0;
    text-align: center;
  }

  .NoData,
  .error {
    min-height: 50px; // TODO: look into making this adjustable with css vars when refactoring List styles. Should share the same var as ListRow component

    display: grid;
    grid-template-rows: 1fr;

    p {
      display: grid;
      grid-template-rows: 1fr;
      grid-template-columns: 1fr;

      align-items: center;
    }
  }

  .NoData {
    grid-template-columns: 1fr;

    align-items: center;

    p {
      margin-left: 10px;

      color: var(--list-no-data-text-color, $list-no-data-text-color);
    }

    background-color: var(--list-no-data-bg-color, $list-no-data-bg-color) !important;
  }

  .error {
    grid-template-columns: 1fr max-content;

    column-gap: 10px;

    p {
      margin: 10px 0px 10px 10px;

      color: var(--list-error-text-color, $list-error-text-color);
    }

    background-color: var(--list-error-bg-color, $list-error-bg-color) !important;
  }
}
