:host {
  /**
  * @prop --klevu-pagination-selected-text-color var(--klevu-color-primary-text): text color of selected item
  */
  --selected-color: var(--klevu-pagination-selected-color, var(--klevu-color-primary));
}

:host div {
  display: flex;
  gap: var(--klevu-spacing-03);
  justify-content: center;
  flex-wrap: wrap;
}

span,
klevu-icon {
  display: flex;
  height: 32px;
  width: 32px;
  color: var(--klevu-color-neutral-8);
  border-radius: var(--klevu-border-radius-m);
  justify-content: center;
  align-items: center;
  font-size: var(--klevu-body-s-size);
  box-sizing: border-box;
}

span.current {
  font-weight: bold;
  cursor: inherit;
  border: 1px solid var(--selected-color);
  color: var(--selected-color);
}

span:not(.disabled):not(.current):hover,
klevu-icon:not(.disabled):not(.current):hover {
  color: var(--selected-color);
  background-color: var(--klevu-color-neutral-2);
  cursor: pointer;
}

span.disabled,
klevu-icon.disabled {
  opacity: var(--klevu-opacity-disabled);
  cursor: inherit;
}

span.dots {
  width: auto;
}

@media (max-width: 600px) {
  :host {
    gap: var(--klevu-spacing-02);
  }
}