/**
 * @file PHPFlasher Amber Theme Styles
 * @description CSS styling for the modern, elegant Amber theme
 * @author Younes ENNAJI
 */

/**
 * Amber Theme Variables
 *
 * Custom properties that define the appearance of Amber theme notifications.
 */
.fl-amber {
    /* Base colors and appearance */
    --amber-bg-light: #ffffff;          /* Light mode background */
    --amber-bg-dark: #1e293b;           /* Dark mode background */
    --amber-text-light: #4b5563;        /* Light mode text color */
    --amber-text-dark: #f1f5f9;         /* Dark mode text color */
    --amber-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* Light mode shadow */
    --amber-shadow-dark: 0 5px 15px rgba(0, 0, 0, 0.2); /* Dark mode shadow */
    --amber-border-radius: 4px;      /* Border radius for notifications */

    /* Type-specific colors */
    --amber-success: #10b981;           /* Success color (green) */
    --amber-info: #3b82f6;              /* Info color (blue) */
    --amber-warning: #f59e0b;           /* Warning color (orange) */
    --amber-error: #ef4444;             /* Error color (red) */
}

/**
 * Entrance animation for Amber theme
 * Slides in from the top with a subtle fade effect
 */
@keyframes amberIn {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/**
 * Base Amber theme styling
 * Defines the core appearance and behavior of notifications
 */
.fl-amber {
    background-color: var(--amber-bg-light);
    color: var(--amber-text-light);
    padding: 0.85rem 1rem;
    margin: 0.6rem 0;
    position: relative;
    box-shadow: var(--amber-shadow);
    border-radius: var(--amber-border-radius) var(--amber-border-radius) 0 0;
    animation: amberIn 0.3s ease-out;
    font-family: var(--fl-font), serif;
    will-change: transform, opacity;

    /**
     * Content container
     * Holds all notification elements in a flexbox layout
     */
    .fl-content {
        display: flex;
        align-items: center;
    }

    /**
     * Icon styling
     * The icon is rendered by the core icons.scss
     */
    .fl-icon {
        font-size: 1.85em;
        margin-right: 0.8rem;
    }

    /**
     * Text container
     * Takes up available space with flex: 1
     */
    .fl-text {
        flex: 1;
    }

    /**
     * Message styling
     * Main notification text with optimized readability
     */
    .fl-message {
        font-size: 0.875em;
        line-height: 1.4;
    }

    /**
     * Close button styling
     * Minimal button with hover effect
     */
    .fl-close {
        background: none;
        border: none;
        font-size: 1.15rem;
        padding: 0.25rem;
        cursor: pointer;
        opacity: 0.6;
        transition: opacity 0.2s;
        margin-left: 1rem;
        flex-shrink: 0;
        color: currentColor;
        touch-action: manipulation;

        &:hover, &:focus {
            opacity: 1;
        }
    }

    /**
     * Progress bar container
     * Positioned at the bottom of the notification
     */
    .fl-progress-bar {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3px;
        overflow: hidden;

        /**
         * Progress indicator
         * Animated by JavaScript to show remaining time
         */
        .fl-progress {
            height: 100%;
            width: 100%;
        }
    }

    /**
     * Type-specific styling for close button
     * Each notification type gets its own color for the close button
     */
    &.fl-success {
        .fl-close {
            color: var(--amber-success);
        }
    }

    &.fl-info {
        .fl-close {
            color: var(--amber-info);
        }
    }

    &.fl-warning {
        .fl-close {
            color: var(--amber-warning);
        }
    }

    &.fl-error {
        .fl-close {
            color: var(--amber-error);
        }
    }

    /**
     * RTL (Right-to-Left) language support
     * Adjusts layout for RTL text direction
     */
    &.fl-rtl {
        direction: rtl;

        .fl-icon {
            margin-right: 0;
            margin-left: 0.8rem;
        }

        .fl-close {
            margin-left: 0;
            margin-right: 1rem;
        }

        .fl-progress .fl-progress {
            transform-origin: right center;
        }
    }

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

/**
 * Dark mode support
 * Applies dark theme colors when in dark mode
 */
body.fl-dark .fl-amber,
html.fl-dark .fl-amber,
.fl-amber.fl-auto-dark {
    background-color: var(--amber-bg-dark);
    color: var(--amber-text-dark);
    box-shadow: var(--amber-shadow-dark);
}