.fl-onyx {
    --onyx-bg-light: #ffffff;
    --onyx-bg-dark: #1e1e1e;
    --onyx-text-light: #333333;
    --onyx-text-dark: #f5f5f5;
    --onyx-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    --onyx-shadow-dark: 0 8px 30px rgba(0, 0, 0, 0.25);
    --onyx-border-radius: 4px;
    --onyx-success: #10b981;
    --onyx-info: #3b82f6;
    --onyx-warning: #f59e0b;
    --onyx-error: #ef4444;
}
@keyframes onyxIn {
    0% {
        opacity: 0;
        transform: translateY(15px);
        filter: blur(3px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}
.fl-onyx {
    background-color: var(--onyx-bg-light);
    color: var(--onyx-text-light);
    padding: 1rem 1.25rem;
    margin: 0.75rem 0;
    position: relative;
    box-shadow: var(--onyx-shadow);
    animation: onyxIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: var(--fl-font), serif;
    will-change: transform, opacity, filter;
    border-radius: var(--onyx-border-radius) var(--onyx-border-radius) 0 0;
    overflow: hidden;
    &::before, &::after {
        content: '';
        position: absolute;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        z-index: 1;
    }
    &::before {
        top: 10px;
        left: 10px;
    }
    &::after {
        bottom: 10px;
        right: 10px;
    }
    .fl-content {
        display: flex;
        align-items: center;
        padding-left: 0.4rem;
    }
    .fl-text {
        flex: 1;
        position: relative;
    }
    .fl-message {
        font-size: 0.925rem;
        line-height: 1.5;
        font-weight: 400;
        letter-spacing: 0.01rem;
    }
    .fl-close {
        background: none;
        border: none;
        font-size: 1.25rem;
        padding: 0.25rem;
        cursor: pointer;
        opacity: 0.6;
        transition: all 0.2s ease;
        color: currentColor;
        margin-left: 1rem;
        flex-shrink: 0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.75rem;
        height: 1.75rem;
        &:hover, &:focus {
            opacity: 1;
            background-color: rgba(0, 0, 0, 0.05);
        }
    }
    .fl-progress-bar {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3px;
        overflow: hidden;
        .fl-progress {
            height: 100%;
            width: 100%;
            transform-origin: left center;
        }
    }
    &.fl-success {
        &::before, &::after { background-color: var(--onyx-success); }
        .fl-progress-bar .fl-progress {
            background-color: var(--onyx-success);
        }
    }
    &.fl-info {
        &::before, &::after { background-color: var(--onyx-info); }
        .fl-progress-bar .fl-progress {
            background-color: var(--onyx-info);
        }
    }
    &.fl-warning {
        &::before, &::after { background-color: var(--onyx-warning); }
        .fl-progress-bar .fl-progress {
            background-color: var(--onyx-warning);
        }
    }
    &.fl-error {
        &::before, &::after { background-color: var(--onyx-error); }
        .fl-progress-bar .fl-progress {
            background-color: var(--onyx-error);
        }
    }
    &.fl-rtl {
        direction: rtl;
        .fl-content {
            padding-left: 0;
            padding-right: 0.4rem;
        }
        .fl-close {
            margin-left: 0;
            margin-right: 1rem;
        }
        &::before {
            left: auto;
            right: 10px;
        }
        &::after {
            right: auto;
            left: 10px;
        }
        .fl-progress .fl-progress {
            transform-origin: right center;
        }
    }
    @media (prefers-reduced-motion: reduce) {
        animation: none;
    }
}
body.fl-dark .fl-onyx,
html.fl-dark .fl-onyx,
.fl-onyx.fl-auto-dark {
    background-color: var(--onyx-bg-dark);
    color: var(--onyx-text-dark);
    box-shadow: var(--onyx-shadow-dark);
    .fl-close:hover, .fl-close:focus {
        background-color: rgba(255, 255, 255, 0.1);
    }
}
