/**
 * @file PHPFlasher Amazon Theme Styles
 * @description CSS styling for Amazon-inspired notifications
 * @author Younes ENNAJI
 */

/**
 * Amazon Theme
 *
 * A notification style inspired by Amazon's e-commerce platform.
 * Features distinct color scheme and design language that mimics
 * Amazon's alert components.
 */
.fl-amazon {
    /* Theme-specific variables
     * These define the color palette and styling attributes unique to the Amazon theme
     */

    /* Base colors */
    --amazon-bg-light: #ffffff;           /* Light mode background */
    --amazon-bg-dark: #202124;            /* Dark mode background */
    --amazon-text-light: #0f1111;         /* Light mode primary text */
    --amazon-text-secondary-light: #565959; /* Light mode secondary text */
    --amazon-text-dark: #ffffff;          /* Dark mode primary text */
    --amazon-text-secondary-dark: #b6b6b6; /* Dark mode secondary text */
    --amazon-border-light: #ddd;          /* Light mode border */
    --amazon-border-dark: #3f3f3f;        /* Dark mode border */
    --amazon-yellow: #ffd814;             /* Amazon's signature yellow */
    --amazon-orange: #ff9900;             /* Amazon's signature orange */

    /* Type-specific colors - Light mode */
    --amazon-success-bg: #f0fff5;         /* Success background */
    --amazon-success-border: #7fda95;     /* Success border */
    --amazon-success-icon: #007600;       /* Success icon color */
    --amazon-info-bg: #f3f9ff;            /* Info background */
    --amazon-info-border: #7fb4da;        /* Info border */
    --amazon-info-icon: #0066c0;          /* Info icon color */
    --amazon-warning-bg: #fffcf3;         /* Warning background */
    --amazon-warning-border: #ffd996;     /* Warning border */
    --amazon-warning-icon: #c45500;       /* Warning icon color */
    --amazon-error-bg: #fff5f5;           /* Error background */
    --amazon-error-border: #ff8f8f;       /* Error border */
    --amazon-error-icon: #c40000;         /* Error icon color */

    /* Type-specific colors - Dark mode */
    --amazon-success-bg-dark: #082d11;    /* Dark mode success background */
    --amazon-success-border-dark: #1e6e2c; /* Dark mode success border */
    --amazon-success-icon-dark: #7fda95;   /* Dark mode success icon */
    --amazon-info-bg-dark: #0a1c2e;        /* Dark mode info background */
    --amazon-info-border-dark: #1a5183;    /* Dark mode info border */
    --amazon-info-icon-dark: #7fb4da;      /* Dark mode info icon */
    --amazon-warning-bg-dark: #342a0a;     /* Dark mode warning background */
    --amazon-warning-border-dark: #705711; /* Dark mode warning border */
    --amazon-warning-icon-dark: #ffd996;   /* Dark mode warning icon */
    --amazon-error-bg-dark: #2b0c0c;       /* Dark mode error background */
    --amazon-error-border-dark: #721c1c;   /* Dark mode error border */
    --amazon-error-icon-dark: #ff8f8f;     /* Dark mode error icon */

    /* Animation timing */
    --amazon-animation-duration: 0.2s;     /* Duration for all animations */
}

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

/**
 * Base Amazon theme styling
 */
.fl-amazon {
    position: relative;
    margin: 10px 0;
    font-family: Arial, sans-serif;
    animation: amazonSlideDown var(--amazon-animation-duration) ease-out;

    /**
     * Main alert container
     * Contains all notification elements
     */
    .fl-amazon-alert {
        background-color: var(--amazon-bg-light);
        color: var(--amazon-text-light);
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(15, 17, 17, 0.15);
        padding: 14px;
        display: flex;
        border: 1px solid;
        border-left-width: 4px;
    }

    /**
     * Content area
     * Contains icon and text elements
     */
    .fl-alert-content {
        display: flex;
        align-items: flex-start;
        flex: 1;
    }

    /**
     * Icon container
     * Holds the SVG icon
     */
    .fl-icon-container {
        margin-right: 12px;
        flex-shrink: 0;
        color: currentColor;
    }

    /**
     * Text content container
     * Holds title and message
     */
    .fl-text-content {
        flex: 1;
        min-width: 0;
    }

    /**
     * Alert title styling
     */
    .fl-alert-title {
        font-weight: 700;
        font-size: 16px;
        margin-bottom: 4px;
    }

    /**
     * Alert message styling
     */
    .fl-alert-message {
        font-size: 14px;
        line-height: 20px;
        color: var(--amazon-text-secondary-light);
    }

    /**
     * Action buttons container
     * Currently holds only the close button
     */
    .fl-alert-actions {
        margin-left: 16px;
    }

    /**
     * Close button styling
     */
    .fl-close {
        background: none;
        border: none;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--amazon-text-secondary-light);
        transition: all 0.2s;
        padding: 0;

        &:hover {
            background-color: rgba(0, 0, 0, 0.05);
            color: var(--amazon-text-light);
        }
    }

    /**
     * Type-specific styling
     * Each notification type has its own color scheme
     */
    &.fl-success {
        .fl-amazon-alert {
            background-color: var(--amazon-success-bg);
            border-color: var(--amazon-success-border);
        }

        .fl-icon-container {
            color: var(--amazon-success-icon);
        }
    }

    &.fl-info {
        .fl-amazon-alert {
            background-color: var(--amazon-info-bg);
            border-color: var(--amazon-info-border);
        }

        .fl-icon-container {
            color: var(--amazon-info-icon);
        }
    }

    &.fl-warning {
        .fl-amazon-alert {
            background-color: var(--amazon-warning-bg);
            border-color: var(--amazon-warning-border);
        }

        .fl-icon-container {
            color: var(--amazon-warning-icon);
        }
    }

    &.fl-error {
        .fl-amazon-alert {
            background-color: var(--amazon-error-bg);
            border-color: var(--amazon-error-border);
        }

        .fl-icon-container {
            color: var(--amazon-error-icon);
        }
    }

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

        .fl-icon-container {
            margin-right: 0;
            margin-left: 12px;
        }

        .fl-alert-actions {
            margin-left: 0;
            margin-right: 16px;
        }

        .fl-amazon-alert {
            border-left-width: 1px;
            border-right-width: 4px;
        }
    }

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

/**
 * Dark mode support
 * Different styling applied in dark mode
 */
body.fl-dark .fl-amazon,
html.fl-dark .fl-amazon,
.fl-amazon.fl-auto-dark {
    .fl-amazon-alert {
        background-color: var(--amazon-bg-dark);
        color: var(--amazon-text-dark);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        border-color: var(--amazon-border-dark);
    }

    .fl-alert-message {
        color: var(--amazon-text-secondary-dark);
    }

    .fl-close {
        color: var(--amazon-text-secondary-dark);

        &:hover {
            background-color: rgba(255, 255, 255, 0.1);
            color: var(--amazon-text-dark);
        }
    }

    /**
     * Type-specific dark mode styling
     */
    &.fl-success {
        .fl-amazon-alert {
            background-color: var(--amazon-success-bg-dark);
            border-color: var(--amazon-success-border-dark);
        }

        .fl-icon-container {
            color: var(--amazon-success-icon-dark);
        }
    }

    &.fl-info {
        .fl-amazon-alert {
            background-color: var(--amazon-info-bg-dark);
            border-color: var(--amazon-info-border-dark);
        }

        .fl-icon-container {
            color: var(--amazon-info-icon-dark);
        }
    }

    &.fl-warning {
        .fl-amazon-alert {
            background-color: var(--amazon-warning-bg-dark);
            border-color: var(--amazon-warning-border-dark);
        }

        .fl-icon-container {
            color: var(--amazon-warning-icon-dark);
        }
    }

    &.fl-error {
        .fl-amazon-alert {
            background-color: var(--amazon-error-bg-dark);
            border-color: var(--amazon-error-border-dark);
        }

        .fl-icon-container {
            color: var(--amazon-error-icon-dark);
        }
    }
}