@use "variables" as *;

.p-paginator {
    background: $white;
    color: $black;
    border: solid $color-palette-gray-300;
    border-width: 0;
    padding: 0.375rem $spacing-2;
    border-radius: $border-radius-xs;
}

.p-paginator .p-paginator-first,
.p-paginator .p-paginator-prev,
.p-paginator .p-paginator-next,
.p-paginator .p-paginator-last {
    background-color: transparent;
    border: 0 none;
    color: $black;
    min-width: $spacing-7;
    height: $spacing-7;
    margin: 0.143rem;
    transition: none;
    border-radius: 50%;
}

.p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
    background: $bg-hover;
    border-color: transparent;
    color: $text-color-hover;
}

.p-paginator .p-paginator-first {
    border-top-left-radius: $border-radius-xs;
    border-bottom-left-radius: $border-radius-xs;
}

.p-paginator .p-paginator-last {
    border-top-right-radius: $border-radius-xs;
    border-bottom-right-radius: $border-radius-xs;
}

.p-paginator .p-paginator-current {
    background-color: transparent;
    border: 0 none;
    color: $black;
    min-width: $spacing-7;
    height: $spacing-7;
    margin: 0.143rem;
    padding: 0 $spacing-1;
}

.p-paginator .p-paginator-pages .p-paginator-page {
    background-color: transparent;
    border: 0 none;
    color: $black;
    min-width: $spacing-7;
    height: $spacing-7;
    margin: 0.143rem;
    transition: none;
    border-radius: 50%;
}

.p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
    background: $bg-highlight;
    color: $text-color-highlight;
}

.p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
    background: $color-palette-gray-200;
    border-color: transparent;
    color: $text-color-hover;
}

.p-paginator-bottom {
    border: none;
}
.p-paginator .p-paginator-prev.p-disabled .p-paginator-icon,
.p-paginator .p-paginator-next.p-disabled .p-paginator-icon {
    color: $color-palette-gray-400;
}

.p-paginator-icon {
    color: $color-palette-primary;
}
