/**
 * @file PHPFlasher Sapphire Theme Styles
 * @description CSS styling for modern glassmorphic notifications
 * @author Younes ENNAJI
 */

/**
 * PHPFlasher - Sapphire Theme
 *
 * Modern glassmorphic notifications with blurred backdrop effect.
 * Features clean, minimal design and subtle animations.
 */

/* Theme-specific variables - override these to customize the sapphire theme */
.fl-sapphire {
    /* Base appearance */
    --sapphire-bg-base: rgba(30, 30, 30, 0.9);    /* Dark semi-transparent background */
    --sapphire-text: #f0f0f0;                     /* Light text for contrast */
    --sapphire-shadow: rgba(0, 0, 0, 0.15);       /* Subtle shadow */

    /* Progress bar colors */
    --sapphire-progress-bg: rgba(255, 255, 255, 0.2); /* Light translucent background */
    --sapphire-progress-fill: rgba(255, 255, 255, 0.9); /* Nearly white progress indicator */

    /* Notification type colors - all with high transparency */
    --sapphire-success: rgba(16, 185, 129, 0.95);  /* Transparent green */
    --sapphire-error: rgba(239, 68, 68, 0.95);     /* Transparent red */
    --sapphire-warning: rgba(245, 158, 11, 0.95);  /* Transparent amber */
    --sapphire-info: rgba(59, 130, 246, 0.95);     /* Transparent blue */

    /* Animation timing */
    --sapphire-animation: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smooth bounce easing */
}

/**
 * Entrance animation keyframes
 * Includes a subtle bounce effect for a more dynamic appearance
 */
@keyframes sapphireIn {
    0% {
        opacity: 0;                               /* Start invisible */
        transform: translateY(10px);               /* Start below final position */
    }
    60% {
        transform: translateY(-3px);               /* Slight overshoot (bounce) */
    }
    100% {
        opacity: 1;                               /* End fully visible */
        transform: translateY(0);                  /* End at natural position */
    }
}

/**
 * Main theme styling
 */
.fl-sapphire {
    /* Base appearance */
    background-color: var(--sapphire-bg-base);     /* Semi-transparent background */
    color: var(--sapphire-text);                   /* Light text color */
    padding: 1em 1.5em;                            /* Comfortable padding */
    margin: 0 0 0.75em 0;                          /* Bottom spacing between notifications */
    position: relative;
    box-shadow: 0 6px 16px var(--sapphire-shadow); /* Soft shadow for depth */
    transition: all 0.3s ease;                     /* Smooth transitions */
    animation: sapphireIn var(--sapphire-animation); /* Entrance animation with bounce */
    font-family: Roboto, var(--fl-font), serif;    /* Prefer Roboto font */
    border-radius: 4px 4px 0 0;                          /* Rounded corners */
    will-change: transform, opacity;               /* Optimize for animation performance */

    /**
     * Glassmorphism effect
     * Creates the frosted glass appearance
     */
    backdrop-filter: blur(12px);                   /* Strong blur effect */
    -webkit-backdrop-filter: blur(12px);           /* Safari support */

    /**
     * Message styling
     * Clean, readable text
     */
    .fl-message {
        font-size: 0.925em;                        /* ~15px at default font size */
        line-height: 1.4;                          /* Comfortable line height */
        color: var(--sapphire-text);               /* Consistent text color */
    }

    /**
     * Progress bar styling
     * Indicates time remaining before dismissal
     */
    .fl-progress-bar {
        position: absolute;
        bottom: 0;                                 /* Positioned at the bottom */
        left: 0;
        right: 0;
        height: 4px;                               /* Thin progress bar */
        background-color: var(--sapphire-progress-bg); /* Semi-transparent background */
        overflow: hidden;
        border-radius: 0 0 0.375em 0.375em;        /* Rounded bottom corners */

        /**
         * Progress indicator
         * The actual moving part of the progress bar
         */
        .fl-progress {
            background-color: var(--sapphire-progress-fill); /* Lighter fill color */
            height: 100%;
            width: 100%;
            transform-origin: left center;          /* Animation starts from left */
            will-change: transform;                 /* Optimize animation performance */
        }
    }

    /**
     * Type-specific colors
     * Each notification type gets its own semi-transparent background
     */
    &.fl-success {
        background-color: var(--sapphire-success);  /* Green background */
    }

    &.fl-error {
        background-color: var(--sapphire-error);    /* Red background */
    }

    &.fl-warning {
        background-color: var(--sapphire-warning);  /* Amber background */
    }

    &.fl-info {
        background-color: var(--sapphire-info);     /* Blue background */
    }

    /**
     * RTL language support
     * Right-to-left text direction
     */
    &.fl-rtl {
        direction: rtl;                             /* Right-to-left text */

        .fl-progress .fl-progress {
            transform-origin: right center;         /* Animation starts from right */
        }
    }

    /**
     * Accessibility
     * Respects reduced motion preferences
     */
    @media (prefers-reduced-motion: reduce) {
        animation: none;                            /* Disable animation */
    }
}