@mixin pagination-main-container {
    display: flex;
    justify-content: space-between;
    background: $ibexa-white;
}

@mixin pagination-info {
    color: $ibexa-color-font-pale;
    font-size: calculateRem(14px);

    strong {
        color: $ibexa-color-font;
    }
}

@mixin pagination-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calculateRem(25px);
    height: calculateRem(25px);
    border-radius: 50%;
}

@mixin pagination-prev-btn {
    .page-link {
        justify-content: flex-end;
        padding-right: calculateRem(10px);

        &:before {
            content: '';
            position: absolute;
            left: calculateRem(9px);
            top: calculateRem(9px);
            display: block;
            border-right: calculateRem(2px) solid $ibexa-black;
            border-bottom: calculateRem(2px) solid $ibexa-black;
            width: calculateRem(8px);
            height: calculateRem(8px);
            transform: rotate(135deg);
        }
    }
}

@mixin pagination-next-btn {
    .page-link {
        justify-content: flex-start;
        padding-left: calculateRem(10px);

        &:after {
            content: '';
            position: absolute;
            right: calculateRem(9px);
            top: calculateRem(9px);
            display: block;
            border-right: calculateRem(2px) solid $ibexa-black;
            border-bottom: calculateRem(2px) solid $ibexa-black;
            width: calculateRem(8px);
            height: calculateRem(8px);
            transform: rotate(-45deg);
        }
    }
}