@import 'variables';

:host {
  display: block;

  .meta-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 320px;
  }

  .head {
    margin-bottom: 12px;
    padding: 12px;
    display: grid;
    grid-template-columns: 20px 1fr 20px;
    gap: 6px;
    align-items: center;
    text-align: center;
    border-bottom: 1px solid $blue-200;
    min-height: 48px;
    h3 {
      color: $blue-400;
      font-size: 14px;
      font-weight: normal;
      margin: 0;
    }
  }

  ::ng-deep sm-search {
    display: block;
    padding: 0 4px;
    margin-bottom: 4px;
    .search-input {
      padding: 0 6px 0 12px;
    }
  }

}

.list-container {
  overflow: auto;
}

.empty-state {
  text-align: center;
  margin: auto;
  color: $blue-300;
  font-size: 14px;
}

.spinner {
  margin: auto;
}


:host-context(.dark) {
  .head {
    border-bottom-color: $blue-500;
    h3 {
      color: $blue-200;
    }
    .al-icon {
      color: $blue-300;
      &:hover {
        color: $blue-200;
      }
    }
  }
}

