:root {
    --brand: #F87A47;
    --grey: #f8f8f8;
    --white: #ffffff;
    --black: #1b1b1b;
    --black-alt: #18181b;
}

::selection {
    background: var(--brand);
    color: var(--white);
}

.animate-ping {
    &:before {
        animation: animate-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
        background-color: var(--brand);
        border-radius: 0.5rem;
        content: '';
        height: 100%;
        opacity: 0.75;
        position: absolute;
        width: 100%;
        z-index: -1;
    }
}

@keyframes animate-ping {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    
    100% {
        transform: scaleY(1.75) scaleX(1.25);
        opacity: 0;
    }
}

.fi {
    .fi-body {
        background: var(--grey);
        position: relative;
        
        &::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: 
                radial-gradient(at 85% 15%, hsl(22, 96%, 60%) 0px, transparent 50%), 
                radial-gradient(at 92% 25%, hsl(18, 96%, 55%) 0px, transparent 50%), 
                radial-gradient(at 78% 8%, hsl(20, 96%, 58%) 0px, transparent 50%);
            opacity: 0.08;
            z-index: -1;
            pointer-events: none;
        }
    }

    .fi-header-heading {
        font-size: 2rem;
    }

    .fi-fieldset,
    .fi-in-tabs,
    .fi-section,
    .fi-wi-stats-overview-stat {
        background-color: rgba(255, 255, 255, 0.5);
    }
    
    .fi-sidebar {
        background: var(--grey);
        border: solid 1px #ddd;
        border-radius: 1.5rem;
        height: calc(100vh - 2rem);
        margin: 1rem 1rem 1rem 0;
        transition: 0.3s ease-in-out;

        &.fi-sidebar-open {
            border-radius: 1rem;
            margin: 1rem;
        }

        .fi-sidebar-header {
            background: transparent;
            border: none;
            box-shadow: none;
            color: var(--white);
        }

        .fi-sidebar-group-items {
            row-gap: 0.5rem;

            .fi-sidebar-item {
                a, span, svg {
                    transition: 0.3s ease-in-out;
                }

                .fi-badge {
                    background: var(--brand);
                    color: var(--white);
                    opacity: 0.5;
                    transition: 0.3s;
                }

                &:hover {
                    .fi-badge {
                        opacity: 1;
                    }
                }
            }
        }
    }

    .lender-logo {
        img {
            border: solid 1px #eee;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            border-radius: 0.5rem;
            filter: brightness(100%);
            object-fit: contain;
            padding: 0.75rem;
        }
    }

    &.dark {
        .fi-body {
            background: var(--black-alt);
            position: relative;
            
            &::before {
                content: '';
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-image: 
                    radial-gradient(at 85% 15%, hsl(22, 96%, 30%) 0px, transparent 50%), 
                    radial-gradient(at 92% 25%, hsl(18, 96%, 25%) 0px, transparent 50%), 
                    radial-gradient(at 78% 8%, hsl(20, 96%, 28%) 0px, transparent 50%);
                opacity: 0.15;
                z-index: -1;
                pointer-events: none;
            }
        }

        .fi-fieldset,
        .fi-in-tabs,
        .fi-section,
        .fi-wi-stats-overview-stat {
            background-color: rgba(255, 255, 255, 0.01);
        }

        .fi-sidebar {
            background: var(--black-alt);
            border: solid 1px rgba(255, 255, 255, 0.1);

            .fi-sidebar-group-items {
                .fi-sidebar-item {
                    svg, span { 
                        color: rgba(255, 255, 255, 0.5);
                    }

                    &.fi-active {
                        a {
                            background: rgba(255, 255, 255, 0.1);
                        }

                        span {
                            color: var(--white);
                        }

                        svg {
                            color: var(--brand);
                        }
                    }

                    &:hover {
                        a {
                            background: rgba(255, 255, 255, 0.1);
                        }

                        svg, span {
                            color: var(--white);
                        }
                    }
                }
            }
        }

        .lender-logo {
            img {
                background-color: var(--black-alt);
                border: solid 1px rgba(255, 255, 255, 0.1);
            }
        }

        @media (max-width: 600px) {
            .fi-topbar {
                nav {
                    .fi-icon-btn {
                        border: solid 1px rgba(255, 255, 255, 0.1);
                    }
                }
            }
        }
    }

    @media (max-width: 600px) {
        .fi-dashboard-page {
            .fi-wi-widget {
                .fi-section-header > div {
                    align-items: start;
                    flex-direction: column;
                }
            }
        }

        .fi-topbar {
            position: relative;

            nav {
                background-color: transparent !important;
                box-shadow: none;

                .fi-icon-btn {
                    border: solid 1px #ddd;
                    height: 2.75rem;
                    margin: 0.5rem 0 0;
                    width: 2.75rem;

                    svg {
                        height: 1.75rem;
                        width: 1.75rem;
                    }
                }
            }
        }
    }

    @media (min-width: 1024px) {
        .fi-avatar {
            height: 2.25rem !important;
            width: 2.25rem !important;
        }

        .fi-header-heading {
            font-size: 2.75rem;
            margin-top: -1.5rem;
        }

        .fi-modal {
            .fi-modal-heading {
                font-size: 1.5rem;
            }
        }

        .fi-sidebar {
            margin: 1rem;

            .fi-sidebar-header {
                height: 80px;
            }

            .fi-sidebar-nav-groups {
                row-gap: 1.75rem;
            }
        }

        .fi-topbar {
            .fi-input-wrp {
                backdrop-filter: blur(10px);
            }
            
            nav {
                background: transparent;
                border: none;
                box-shadow: none;
                height: 80px;
            }
        }
    }
}