/*------------------------------------*\
    #SEQUENTIAL NAVIGATION
    previous and next buttons
\*------------------------------------*/

@use "../../base/helpers";
@use "../../base/settings";

// modifiable vars
$page-nav__circle-colour: settings.$ds_colour__brand !default;
$page-nav__circle-hover: settings.$ds_colour__link--hover !default;
$page-nav__circle-focus: settings.$ds_colour__link--focus !default;
$page-nav__icon-colour: settings.$ds_colour__button !default;
$page-nav__prefix-colour: settings.$ds_colour__text !default;

// fixed vars vars
$page-nav__circle-size: 3.5rem !default;

.ds_sequential-nav {
    display: grid;
    gap: settings.$grid-gap-y settings.$grid-gap-x;
    grid-template-areas: 'next' 'prev';
    margin-bottom: 3.5rem;
    margin-top: 3.5rem;
    overflow: initial;
}

.ds_sequential-nav__button {
    @include helpers.ds_link--block;
    @include helpers.ds_link-underline('.ds_sequential-nav__text');

    line-height: 1.5rem;
    padding: 0.75rem 0.25rem;
    position: relative;
    width: 100%;

    &:not([href]) {
        display: none;
    }

    > * {
        pointer-events: none;
    }

    // Shared styles for left and right variations
    // ::before is the circle
    ///
    /// [1] renders a border in windows high contrast mode
    ///
    &--left::before,
    &--right::before {
        content: '';
        height: $page-nav__circle-size;
        width: $page-nav__circle-size;
        background-color: $page-nav__circle-colour;
        background-position: center;
        border-radius: $page-nav__circle-size;
        border: 0.125rem solid $page-nav__circle-colour; /// [1]
        display: inline-block;
        position: absolute;
        top: 0.5rem;

        transition: background-color settings.$transition-out-time;
    }

    // ::after is the chevron
    &--left,
    &--right {
        &::after {
            color: $page-nav__icon-colour;
            position: absolute;
            top: 1.5625rem;
        }
    }

    &--left {
        padding-left: ($page-nav__circle-size + 1.0625rem);
        text-align: left;

        &::before {
            left: 0.25rem;
        }

        &::after {
            @include helpers.ds_chevron(left, 1.375rem);
            left: 1.5rem;
        }
    }

    &--right {
        text-align: right;
        float: right;
        padding-right: ($page-nav__circle-size + 1.0625rem);
        text-align: right;

        &::before {
            right: 0.25rem;
        }

        &::after {
            @include helpers.ds_chevron(right, 1.375rem);
            right: 1.5rem;
        }
    }
}

.ds_sequential-nav__button:hover {
    &::before {
        background-color: $page-nav__circle-hover;
        border-color: $page-nav__circle-hover;
    }
}

.ds_sequential-nav__button:focus {
    &::before {
        background-color: $page-nav__circle-focus;
        border-color: $page-nav__circle-focus;
    }

    &::after {
        border-color: settings.$ds_colour__link--focus__background;
    }
}

.ds_sequential-nav__text {
    display: inline-block;
    padding-top: 1.5rem;
    position: relative;
    width: 100%;

    &::before {
        color: $page-nav__prefix-colour;
        content: attr(data-label);
        font-size: 1rem;
        font-weight: settings.$bold;
        left: 0;
        position: absolute;
        right: 0;
        text-transform: uppercase;
        top: 0;

        @include helpers.media-query(medium) {
            font-size: helpers.px-to-rem(settings.$root-font-size);
        }
    }
}

.ds_sequential-nav__item {
    width: 100%;

    &--prev {
        grid-area: prev;
    }

    &--next {
        grid-area: next;
    }
}

@include helpers.ds_media-query(small) {
    .ds_sequential-nav {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 'prev next';
    }
}