@function get-page-container-spacing($container-width, $grid-gutter-width: 28px) {
    @return calc((100vw - (#{$container-width} - #{$grid-gutter-width})) / 2);
}

@mixin button-scroll-wrapper($align: 'left') {
    position: sticky;
    left: 0;
    bottom: 10px;
    margin-bottom: 10px;
    display: flex;
    z-index: 99;

    @if $align == 'left' {
        justify-content: flex-start;
    }

    @if $align == 'right' {
        justify-content: flex-end;
    }
    
    // Prevent to have the wrapper over page content
    pointer-events: none;
}

@mixin button-page-scroll {
    // Put back pointer-event only on the button
    pointer-events: all;
}

@mixin scroll-button-offset-position {
    $button-offset: 20px;

    @media (min-width: 576px) {
        $page-container-spacing: get-page-container-spacing(540px);

        margin-right: calc(#{$page-container-spacing} * -1 + #{$button-offset});
    }

    @media (min-width: 768px) {
        $page-container-spacing: get-page-container-spacing(720px);

        margin-right: calc(#{$page-container-spacing} * -1 + #{$button-offset});
    }

    @media (min-width: 992px) {
        $page-container-spacing: get-page-container-spacing(960px);

        margin-right: calc(#{$page-container-spacing} * -1 + #{$button-offset});
    }

    @media (min-width: 1330px) {
        $page-container-spacing: get-page-container-spacing(1320px);

        margin-right: calc(#{$page-container-spacing} * -1 + #{$button-offset});
    }
}
