@import '../shared-styles/index';

:host {
    display: block;

    button:focus {
        outline: none;
    }

    // don't show inner dotted border on firefox
    button::-moz-focus-inner {
        border: 0;
    }
}

.nx-pagination__container {
    display: flex;
    @include type-style(pagination);
    padding: 0;
}

.nx-pagination__item {
    margin: 0 nx-spacer(s);
    list-style: none;
    font-weight: v(pagination-item-font-weight);
}

.nx-pagination__item:first-child {
    margin: 0;
}

.nx-pagination__item:last-child {
    margin: 0;
}

.nx-pagination__item.is-ellipsis {
    color: v(pagination-text-color);
}

.nx-pagination__item--expanded-view {
    display: block;
}

.nx-pagination__link {
    color: v(pagination-link-color);
    padding: 0;
    text-decoration: none;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
}

.nx-pagination__link.is-active {
    color: v(pagination-text-color);
    font-weight: nx-font-weight(bold);

    @media screen and (forced-colors: active) {
        border-bottom: nx-border-size(xl) solid CanvasText;
    }
}

nx-icon.nx-pagination__arrow,
nx-icon.nx-pagination__arrow {
    font-size: v(pagination-icon-size);
}

.nx-pagination-compact {
    display: flex;
    @include type-style(pagination);
    padding: 0;
}

.nx-pagination-compact__display {
    color: v(pagination-text-color);
    display: flex;
}

.nx-pagination-compact__current-page {
    font-weight: nx-font-weight(bold);
    margin-right: nx-spacer(2xs);

    :host-context([dir='rtl']) & {
        margin-right: initial;
        margin-left: nx-spacer(2xs);
    }
}

.nx-pagination-compact__total-pages {
    margin-left: nx-spacer(2xs);

    :host-context([dir='rtl']) & {
        margin-right: nx-spacer(2xs);
        margin-left: initial;
    }
}

.nx-pagination-compact__next,
.nx-pagination-compact__previous,
.nx-pagination__arrow-last,
.nx-pagination__arrow-first {
    color: v(pagination-link-color);
    font-weight: v(pagination-icon-font-weight);
    text-decoration: none;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    padding: 0;
    background-color: transparent;
    cursor: pointer;
    border: 0;
}

.nx-pagination-compact__previous {
    margin-right: nx-spacer(2m);

    :host-context([dir='rtl']) & {
        margin-right: initial;
        margin-left: nx-spacer(2m);
    }
}

.nx-pagination-compact__next {
    margin-left: nx-spacer(2m);

    :host-context([dir='rtl']) & {
        margin-right: nx-spacer(2m);
        margin-left: initial;
    }
}

.nx-pagination-compact__direction-label {
    display: block;
    @include type-style(pagination-compact-direction);
}

.nx-pagination-compact__direction-label:first-child {
    margin-right: nx-spacer(2xs);

    :host-context([dir='rtl']) & {
        margin-right: initial;
        margin-left: nx-spacer(2xs);
    }
}

.nx-pagination-compact__direction-label:last-child {
    margin-left: nx-spacer(2xs);

    :host-context([dir='rtl']) & {
        margin-right: nx-spacer(2xs);
        margin-left: initial;
    }
}

.nx-pagination-compact__previous.is-disabled,
.nx-pagination-compact__next.is-disabled,
.nx-pagination__link.is-disabled {
    color: v(pagination-link-disabled-color);
    cursor: not-allowed;

    @media screen and (forced-colors: active) {
        color: GrayText;
    }
}

// ARIA styles
.nx-pagination-compact__previous.cdk-keyboard-focused,
.nx-pagination-compact__next.cdk-keyboard-focused,
.nx-pagination__link.cdk-keyboard-focused,
.nx-pagination--icon.cdk-keyboard-focused,
.nx-pagination--number.cdk-keyboard-focused {
    @include focus-style;
    border-radius: nx-border-radius(s);
}

.nx-pagination__link--next,
.nx-pagination__link--previous,
.nx-pagination__link--first,
.nx-pagination__link--last {
    display: flex;
    align-items: center;
}

.nx-pagination__item-next {
    margin-right: nx-spacer(2xs);

    :host-context([dir='rtl']) & {
        margin-right: initial;
        margin-left: nx-spacer(2xs);
    }
}

.nx-pagination__item-previous {
    margin-left: nx-spacer(2xs);

    :host-context([dir='rtl']) & {
        margin-right: nx-spacer(2xs);
        margin-left: initial;
    }
}

.nx-pagination-compact__direction-label,
.nx-pagination__link--first,
.nx-pagination__link--last,
.nx-pagination__item--desktop {
    display: flex;

    @include media-breakpoint-down(small) {
        display: none;
    }
}

.nx-pagination__item--mobile {
    display: none;

    @include media-breakpoint-down(small) {
        display: block;
    }
}

.nx-pagination-slider {
    .nx-pagination__item {
        display: flex;
        align-items: center;
        margin: 0 nx-spacer(s);
    }
    .nx-pagination--icon {
        width: v(pagination-slider-icon-width);
        height: v(pagination-slider-icon-height);
        border: 1px solid v(pagination-slider-icon-border-color);
        border-radius: 50%;
        padding: 0;
        background: none;
        cursor: pointer;
    }
    .nx-pagination--icon.is-active {
        background-color: v(pagination-slider-icon-active-color);
        cursor: auto;
    }
}
