/**
    Applies all the outline properties useful to show a dashed-focus ring around a component.
    TODO: replace `$border-radius: 0.1rem` with semantic border-radius but keep in mind some components that must stay at 2px border-radius: checkbox, radio, links, ...
 */
:host {
  display: block;
  margin-top: var(--wcs-grid-pagination-margin-top);
  --wcs-grid-pagination-color: var(--wcs-semantic-color-text-primary);
  --wcs-grid-pagination-font-size: var(--wcs-semantic-font-size-label-2);
  --wcs-grid-pagination-font-weight: var(--wcs-semantic-font-weight-medium);
  --wcs-grid-pagination-gap: var(--wcs-semantic-spacing-base);
  --wcs-grid-pagination-page-size-gap: var(--wcs-semantic-spacing-base);
  --wcs-grid-pagination-counter-gap: var(--wcs-semantic-spacing-small);
  --wcs-grid-pagination-margin-top: var(--wcs-semantic-spacing-large);
  --wcs-grid-pagination-arrow-color-inactive: unset; /* Optional : Overrides the fill property of the grid-pagination-arrow */
  --wcs-grid-pagination-arrow-color-active: unset; /* Optional : Overrides the fill property of the grid-pagination-arrow */
}

.container {
  display: grid;
  gap: var(--wcs-grid-pagination-gap);
  grid-template-columns: auto auto auto;
  justify-content: space-between;
  align-items: center;
  color: var(--wcs-grid-pagination-color);
  font-size: var(--wcs-grid-pagination-font-size);
  font-weight: var(--wcs-grid-pagination-font-weight);
}

.available-page-sizes {
  width: auto;
}

.page-management, .page-size, .items-count {
  display: flex;
  align-items: center;
}

.page-size {
  gap: var(--wcs-grid-pagination-page-size-gap);
}

.page-management {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.pagination-arrow {
  display: flex;
}

.pagination-counter {
  padding: 0 var(--wcs-grid-pagination-counter-gap);
}
.pagination-counter span {
  white-space: nowrap;
}

/* TODO : Remove this when the select component will be able to handle the size S */
wcs-select.available-page-sizes {
  --wcs-select-control-height: var(--wcs-semantic-size-s);
}