$table-colors: (
  title-bg: $base-primary-blue,
  title-color: $base-white-color,
  title-bg-hover: $base-grey-color,
  title-color-hover: $base-blue-color,
  table-bg: $base-grey-color,
  border-color: $base-light-blue-color,
);

.table {
  &__parent {
    background: map-get($table-colors, 'table-bg');
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    margin: 0;
  }

  &__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding: 10px;
    border: 1px solid map-get($table-colors, 'border-color');
  }

  &__explanation {
    flex-direction: column;
  }

  &__title {
    border: none;
    background: map-get($table-colors, 'title-bg');
    color: map-get($table-colors, 'title-color');
  }
}

.pagination {
  &__item {
    cursor: pointer;
    padding: 4px 8px;
    margin: 0;
    border: 1px solid map-get($table-colors, 'border-color');
    color: map-get($table-colors, 'title-bg');

    &:hover {
      color: map-get($table-colors, 'title-color-hover');
      background-color: map-get($table-colors, 'title-bg-hover');
    }
  }

  &__item.active {
    background-color: map-get($table-colors, 'title-bg');
    color: map-get($table-colors, 'title-color');
  }
}