{{-- resources/views/support/components/filament/slanted-bg.blade.php --}}

@if (! View::hasSection('hideSlantedBg'))
    <div aria-hidden="true" class="fixed inset-0 pointer-events-none overflow-hidden z-[1] bg-white dark:bg-gray-200">
        <!-- Removed because Ivan didn't like it -->
        <!-- {{-- Top shadow (under top band, above middle) --}}
        <span
            class="absolute inset-0 z-[5] translate-y-[7px] blur-[10px]"
            style="
                -webkit-clip-path: polygon(0 0, 100% 0, 100% 20%, 0 30%);
                clip-path: polygon(0 0, 100% 0, 100% 20%, 0 30%);
                background: linear-gradient(to bottom, rgba(0,0,0,0.20), rgba(0,0,0,0.00) 70%);
            "
        ></span>

        {{-- Middle shadow (under middle band, above bottom) --}}
        <span
            class="absolute inset-0 z-[3] translate-y-[7px] blur-[10px]"
            style="
                -webkit-clip-path: polygon(0 20%, 100% 10%, 100% 30%, 0 50%);
                clip-path: polygon(0 20%, 100% 10%, 100% 30%, 0 50%);
                background: linear-gradient(to bottom, rgba(0,0,0,0.26), rgba(0,0,0,0.00) 70%);
            "
        ></span>

        {{-- Bottom shadow (under bottom band) --}}
        <span
            class="absolute inset-0 z-[1] translate-y-[7px] blur-[12px]"
            style="
                -webkit-clip-path: polygon(0 34%, 100% 26%, 100% 40%, 0 80%);
                clip-path: polygon(0 34%, 100% 26%, 100% 40%, 0 80%);
                background: linear-gradient(to bottom, rgba(0,0,0,0.22), rgba(0,0,0,0.00) 75%);
            "
        ></span> -->

        {{-- Bottom band --}}
        <span
            class="absolute inset-0 z-[2] bg-[#4ac4d6] dark:bg-[#2b7f8b]"
            style="
                -webkit-clip-path: polygon(0 34%, 100% 26%, 100% 40%, 0 80%);
                clip-path: polygon(0 34%, 100% 26%, 100% 40%, 0 80%);
            "
        ></span>

        {{-- Middle band --}}
        <span
            class="absolute inset-0 z-[4] bg-[#2e98a6] dark:bg-[#1b5f69]"
            style="
                -webkit-clip-path: polygon(0 20%, 100% 10%, 100% 30%, 0 50%);
                clip-path: polygon(0 20%, 100% 10%, 100% 30%, 0 50%);
            "
        ></span>

        {{-- Top band --}}
        <span
            class="absolute inset-0 z-[6] bg-[#297983] dark:bg-[#143f45]"
            style="
                -webkit-clip-path: polygon(0 0, 100% 0, 100% 20%, 0 30%);
                clip-path: polygon(0 0, 100% 0, 100% 20%, 0 30%);
            "
        ></span>
    </div>
@endif