/* ========================================
   Page Navigation
   ======================================== */

.pht-nav {
    @apply flex justify-between mb-6.25 px-0;
    @media (width >= 64rem) {
        margin-bottom: var(--pht-component-mb-lg, calc(var(--spacing) * 12.5));
    }
    .pht-prev{
        @apply button-arrow button-arrow-prev;
    }

    .pht-skip{
        @apply button-arrow button-arrow-skip;
    }
}

.pht-next{
    #pht-payments[data-button-style="outline"] & {
        @apply button-primary!;
        background-color: var(--pht-next-bg, var(--color-actions-primary));
        border-radius: var(--pht-btn-radius, var(--radius-lg)) !important;
        text-transform: var(--pht-btn-text-transform, none) !important;
        &:hover, &:focus {
            background-color: var(--pht-next-hover-bg, color-mix(in oklab, var(--pht-next-bg, var(--color-actions-primary)) 90%, black)) !important;
        }
    }
    #pht-payments[data-button-style="clip"] & {
        @apply button-clip;
        --clip-bg: var(--pht-next-bg, var(--color-actions-primary));
        --clip-border-color: var(--pht-next-bg, var(--color-actions-primary));
        color: var(--color-primary-foreground);
        &:hover, &:focus {
            --clip-bg: var(--pht-next-bg, var(--color-actions-primary));
            --clip-border-color: var(--pht-next-bg, var(--color-actions-primary));
        }
    }
}

.pht-full-width{
    .pht-next{
        @apply max-lg:w-full lg:min-w-80 lg:mx-auto;
    }
}