/**
 * @file PHPFlasher Default Theme
 * @description Classic bordered notification style with colorful accents
 * @author Younes ENNAJI
 */

@use "sass:color";
@use '../mixins' as *;

/**
 * Animation for flasher theme
 * Slides in from the left with a fade effect
 */
@keyframes flasherIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* RTL animation */
@keyframes flasherInRtl {
    from {
        opacity: 0;
        transform: translateX(10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/**
 * Base theme styling
 * The default PHPFlasher notification appearance
 */
.fl-flasher {
    /* Base appearance */
    line-height: 1.5;
    background-color: var(--background-color, var(--fl-bg-light));
    color: var(--text-color, var(--fl-text-light));
    word-break: break-word;
    padding: 0.75em;
    margin: 0.75em 0;
    position: relative;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-bottom: none;
    font-family: var(--fl-font), serif;
    will-change: transform, opacity;
    animation: flasherIn 0.3s ease-out;
    transition: transform 0.2s ease;

    /* Subtle lift effect on hover */
    &:hover {
        transform: translateY(-2px);
    }

    /* RTL animation */
    &.fl-rtl {
        animation: flasherInRtl 0.3s ease-out;
    }

    /* Border radius handling for RTL and LTR */
    &.fl-rtl {
        border-radius: 0 0.375em 0.375em 0;
    }

    &:not(.fl-rtl) {
        border-radius: 0.375em 0 0 0.375em;
    }

    /* Content layout */
    .fl-content {
        display: flex;
        align-items: center;
    }

    /* RTL content ordering */
    &.fl-rtl .fl-content {
        flex-direction: row-reverse;
    }

    /* Icon sizing */
    .fl-icon {
        font-size: 2.5em;
    }

    /* Text styling */
    .fl-title,
    .fl-message {
        display: block;
        margin-left: 1em;
        margin-right: 1em;
        line-height: 1.25em;
    }

    /* RTL text margin adjustments */
    &.fl-rtl .fl-title,
    &.fl-rtl .fl-message {
        margin-left: 1em;
        margin-right: 1em;
    }

    .fl-title {
        font-size: 1em;
        font-weight: 600;
    }

    .fl-message {
        margin-top: 0.25em;
        font-size: 0.875em;
    }

    /* Apply standard mixins for common functionality */
    @include close-button;
    @include rtl-support;

    /* Type-specific styling */
    @include variants using($type) {
        /* Colored left border */
        border-left: 0.8em solid var(--#{$type}-color, var(--fl-#{$type}));

        /* RTL border handling */
        &.fl-rtl {
            border-right: 0.8em solid var(--#{$type}-color, var(--fl-#{$type}));
            border-left: none;
        }

        &:not(.fl-rtl) {
            border-right: none;
            border-left: 0.8em solid var(--#{$type}-color, var(--fl-#{$type}));
        }

        /* Type-colored title and close button */
        .fl-title {
            color: var(--#{$type}-color, var(--fl-#{$type}));
        }

        .fl-close {
            color: var(--#{$type}-color, var(--fl-#{$type}));

            &:hover, &:focus {
                transform: translateY(-50%) scale(1.1);
            }
        }
    }

    /* Progress bar styling */
    @include progress-bar;

    /* Dark mode support */
    @include dark-mode {
        background-color: var(--dark-background-color, var(--fl-bg-dark));
        color: var(--dark-text-color, var(--fl-text-dark));
    }

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

        &:hover {
            transform: none;
        }

        .fl-close:hover, .fl-close:focus {
            transform: translateY(-50%);
        }
    }
}