:host() {
  display: block;
}

.pagination-bar {
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ic-space-xl);
  padding: var(--ic-space-xs) var(--ic-space-md);
  box-sizing: border-box;

  --ic-typography-color: var(--ic-pagination-text);
}

.pagination-bar-left {
  justify-content: flex-start;
}

.item-controls {
  display: flex;
  align-items: center;
  gap: var(--ic-space-xl);
}

.pagination-bar-space-between .item-controls {
  margin-right: auto;
}

.items-per-page-holder {
  display: flex;
  align-items: center;
  gap: var(--ic-space-xs);
}

.items-per-page-input {
  --input-width: 5rem;
  --ic-typography-color: var(--ic-pagination-select-content);
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: var(--ic-space-xl);
}

.pagination-controls-wrap {
  flex-direction: column;
  align-items: flex-end;
  gap: var(--ic-space-xs);
}

.pagination-bar-space-between .pagination-controls {
  margin-left: auto;
}

.go-to-page-holder {
  display: flex;
  align-items: center;
  gap: var(--ic-space-xs);
}

.go-to-page-input {
  --input-width: var(--ic-space-xl);
}

.go-to-page-button {
  --min-width: var(--ic-space-xl);
}

.items-per-page-control-label {
  white-space: nowrap;
}

@media screen and (max-width: 768px) {
  .pagination-bar {
    flex-direction: column;
    align-items: flex-end;
    height: -moz-fit-content;
    height: fit-content;
    gap: var(--ic-space-xs);
  }

  .pagination-bar-left {
    align-items: flex-start;
  }
}

@media screen and (max-width: 320px) {
  .item-controls,
  .pagination-controls {
    flex-direction: column;
    align-items: flex-end;
    gap: var(--ic-space-xs);
  }

  .pagination-bar-left .item-controls,
  .pagination-bar-left .pagination-controls,
  .pagination-bar-space-between .item-controls,
  .pagination-bar-space-between .pagination-controls {
    align-items: flex-start;
  }
}