:host {
  position: relative;
  box-sizing: border-box;
  font-feature-settings: "cv03", "cv04", "cv11";
}
:host *, :host *:before, :host *:after {
  box-sizing: inherit;
}

:host {
  display: inline-flex;
  position: relative;
}

.pagination {
  box-shadow: var(--sl-shadow-small);
  border-radius: var(--sl-input-border-radius-medium);
}
.pagination > * {
  border: 1px solid var(--sl-input-border-color);
  display: inline-flex;
  position: relative;
  font-size: var(--sl-font-size-small);
  line-height: var(--sl-line-height-dense);
  align-items: center;
  box-sizing: border-box;
  height: 38px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}
.pagination > :first-child {
  border-top-left-radius: var(--sl-input-border-radius-medium);
  border-bottom-left-radius: var(--sl-input-border-radius-medium);
}
.pagination > :not(:first-child) {
  margin-left: -1px;
}
.pagination > :last-child {
  border-top-right-radius: var(--sl-input-border-radius-medium);
  border-bottom-right-radius: var(--sl-input-border-radius-medium);
}

.pagination__page {
  padding: var(--sl-spacing-x-small) var(--sl-spacing-medium);
}

.pagination__page--selected {
  border-color: var(--sl-color-blue-500);
  z-index: 10;
}

.pagination__direction {
  padding: var(--sl-spacing-x-small) var(--sl-spacing-small);
}

.pagination__direction {
  top: 2px;
}