/**
 * Default pagination style
 */
.vp-pagination__style-default {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    margin: -3px;
    margin-top: 17px;
    list-style-type: none;

    .vp-pagination__item a {
        outline: none;
        box-shadow: none;
    }

    // align
    &.vp-pagination__align-left {
        justify-content: flex-start;
    }
    &.vp-pagination__align-right {
        justify-content: flex-end;
    }

    .vp-pagination__item {
        flex: 0 0 auto;
        padding: 0;
        margin: 3px;
        text-align: center;
        list-style-type: none;

        > * {
            display: block;
            min-width: 40px;
            padding: 8px 16px;
            line-height: 1.4;
            color: inherit;
            text-decoration: none;
            background-color: #fff;
            border: 1px solid #eaeaea;
            transition: .2s border-color, .2s background-color, .2s color;
            will-change: border-color, background-color, color;
        }

        &:not(.vp-pagination__item-active) > a:hover {
            border: 1px solid #bfbfbf;
        }

        &.vp-pagination__item-active > * {
            color: #fff;
            cursor: default;
            background-color: #6c7781;
            border: 1px solid #6c7781;
        }
    }

    // show/hide labels
    .vp-pagination__load-more > .vp-pagination__load-more-no-more,
    .vp-pagination__load-more > .vp-pagination__load-more-loading,
    .vp-portfolio__loading & .vp-pagination__load-more > span,
    &.vp-pagination__no-more .vp-pagination__load-more > span,
    .vp-portfolio__loading &.vp-pagination__no-more .vp-pagination__load-more > .vp-pagination__load-more-no-more {
        display: none;
    }
    .vp-pagination__load-more > span,
    .vp-portfolio__loading & .vp-pagination__load-more > .vp-pagination__load-more-loading,
    &.vp-pagination__no-more .vp-pagination__load-more > .vp-pagination__load-more-no-more {
        display: block;
    }

    // disable no more and loading buttons
    &.vp-pagination__no-more .vp-pagination__load-more,
    .vp-portfolio__loading & .vp-pagination__load-more {
        pointer-events: none;
        cursor: default;
        background-color: transparent;
        border: none;
        transition: none;
    }
    &.vp-pagination__no-more .vp-pagination__load-more {
        opacity: .5;
    }
}

/* Loading Spinner */
// Spinner parameters
$color: rgba(#000, .1) !default;
$color_inner: #6c7781 !default;
$size: 20px !default;
$size_inner: $size * .35 !default;
$weight: 2px !default;

.vp-spinner {
    position: relative;
    display: inline-block;
    width: $size;
    height: $size;
    margin-top: -2px;
    vertical-align: middle;
    border-radius: 50%;
    box-shadow: inset 0 0 0 $weight $color;

    i {
        position: absolute;
        display: block;
        width: $size_inner;
        height: $size_inner;
        overflow: hidden;
        transform-origin: $size / 2 $size / 2;
        animation: vp-spinner .4s infinite linear;

        &::after {
            content: "";
            display: block;
            width: $size;
            height: $size;
            border-radius: 50%;
            box-shadow: inset 0 0 0 $weight $color_inner;
        }
    }
}

@keyframes vp-spinner {
    100% {
        transform: rotate(360deg);
    }
}