@import '../../../styles/definitions/breakpoints';
@import '../../../styles/definitions/typography';
@import '../../../styles/definitions/colors';
@import '../../../styles/fills';
@import '../../../styles/mixins';

// Local Variables
$namespace: ".paging";
$paging-height: 40px;
$paging-height-small: 28px;
$paging-border-color: $gray-87;
$paging-item-bg-color: $white;
$paging-item-bg-color-current: $mid-gray;
$paging-item-bg-color-hover: $faint-gray;
$paging-item-color: $gray-61;
$paging-item-color-current: $deepest-gray;

//Local Placeholders
%sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

%paging-item {
    @include text-6;
    line-height: 14px;
}

// Component Styles
#{$namespace} {
    &_wrapper {
        display: flex;
        align-items: center;
        height: $paging-height;

        &--small {
            height: $paging-height-small;
        }
    }

    &_group {
        display: flex;
        align-items: center;
        height: 100%;
        border-radius: 3px;
        overflow: hidden;
        border: 1px solid $paging-border-color;
    }

    &_page {
        @extend %paging-item;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 5px 10px;
        background: $paging-item-bg-color;
        text-decoration: none;
        color: $paging-item-color;

        &--current {
            color: $paging-item-color-current;
            background-color: $paging-item-bg-color-current;
            box-shadow: inset 0 1px 3px 0 rgba(45, 45, 45, 0.2);
        }
        &:hover, &:focus {
            background-color: $paging-item-bg-color-hover;
        }

        &:not(:last-of-type) {
            border-right: 1px solid $paging-border-color;
        }

        svg {
            fill: $paging-item-color;
        }
    }

    &_arrowText {
        @extend %sr-only;
    }

    &_ellipsis {
        @extend %paging-item;
        margin: 0 5px;
        color: rgba($black, 0.37);
    }
}
