:root, .neeto-ui-theme--light, .neeto-ui-theme--dark {
  --neeto-ui-pagination-item-padding-x: 0.25rem;
  --neeto-ui-pagination-item-padding-y: 0.25rem;
  --neeto-ui-pagination-item-width: 1.75rem;
  --neeto-ui-pagination-item-height: 1.75rem;
  --neeto-ui-pagination-item-margin-x: 0.25rem;
  --neeto-ui-pagination-item-margin-y: 0px;
  --neeto-ui-pagination-item-font-size: var(--neeto-ui-text-sm);
  --neeto-ui-pagination-item-font-weight: var(--neeto-ui-font-medium);
  --neeto-ui-pagination-item-color: rgb(var(--neeto-ui-gray-700));
  --neeto-ui-pagination-item-bg-color: rgb(var(--neeto-ui-white));
  --neeto-ui-pagination-item-line-height: 1;
  --neeto-ui-pagination-item-border-width: 1px;
  --neeto-ui-pagination-item-border-color: transparent;
  --neeto-ui-pagination-item-border-radius: var(--neeto-ui-rounded);

  // Hover
  --neeto-ui-pagination-item-hover-color: rgb(var(--neeto-ui-gray-800));
  --neeto-ui-pagination-item-hover-bg-color: rgb(var(--neeto-ui-gray-200));

  // Focus Visible
  --neeto-ui-pagination-item-focus-visible-outline: 3px solid rgba(var(--neeto-ui-primary-500), 50%);
  --neeto-ui-pagination-item-focus-visible-outline-offset: 1px;
  --neeto-ui-pagination-item-focus-visible-box-shadow: none;

  // Active
  --neeto-ui-pagination-item-active-border-color: rgb(var(--neeto-ui-primary-500));
  --neeto-ui-pagination-item-active-bg-color: rgb(var(--neeto-ui-primary-500));
  --neeto-ui-pagination-item-active-color: rgb(var(--neeto-ui-white));
}

.neeto-ui-pagination__wrapper {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  list-style: none;

  .neeto-ui-pagination__item:not(.neeto-ui-pagination__item--dots) {
    margin: var(--neeto-ui-pagination-item-margin-y) var(--neeto-ui-pagination-item-margin-x);
    overflow: hidden;

    &:hover:not(.disabled, .active) {
      background-color: var(--neeto-ui-pagination-item-hover-bg-color);
      color: var(--neeto-ui-pagination-item-hover-color);
    }
  }

  .neeto-ui-pagination__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--neeto-ui-pagination-item-padding-y) var(--neeto-ui-pagination-item-padding-x);
    min-width: var(--neeto-ui-pagination-item-width);
    height: var(--neeto-ui-pagination-item-height);
    line-height: var(--neeto-ui-pagination-item-line-height);
    font-size: var(--neeto-ui-pagination-item-font-size);
    font-weight: var(--neeto-ui-pagination-item-font-weight);
    transition: var(--neeto-ui-transition);
    border: var(--neeto-ui-pagination-item-border-width) solid var(--neeto-ui-pagination-item-border-color);
    border-radius: var(--neeto-ui-pagination-item-border-radius);
    color: var(--neeto-ui-pagination-item-color);
    background-color: var(--neeto-ui-pagination-item-bg-color);
    text-align: center;
    user-select: none;
    cursor: pointer;

    a {
      display: block;
      text-align: center;
      color: inherit;
      text-decoration: none;
    }

    &:focus-visible {
      outline: var(--neeto-ui-pagination-item-focus-visible-outline);
      outline-offset: var(--neeto-ui-pagination-item-focus-visible-outline-offset);
      box-shadow: var(--neeto-ui-pagination-item-focus-visible-box-shadow);

      a {
        outline: none;
        border: none;
      }
    }

    &.active {
      border-color: var(--neeto-ui-pagination-item-active-border-color);
      background-color: var(--neeto-ui-pagination-item-active-bg-color);
      color: var(--neeto-ui-pagination-item-active-color);
    }

    &.disabled {
      --neeto-ui-pagination-item-color: rgb(var(--neeto-ui-gray-300));

      a {
        cursor: not-allowed;
      }
    }

    &.neeto-ui-pagination__item--dots {
      --neeto-ui-pagination-item-bg-color: transparent;
    }
  }
}

.neetix-pagination {
  --neeto-ui-pagination-item-width: 2rem;
  --neeto-ui-pagination-item-height: 2rem;
  --neeto-ui-pagination-item-active-border-color: rgb(var(--neeto-ui-gray-800));
  --neeto-ui-pagination-item-active-bg-color: rgb(var(--neeto-ui-gray-800));
}
