/* Notification styles for Control Freak UI */

.controller-notification {
    font-family: var(--cf-brand-font, sans-serif); /* Added fallback */
    font-size: 14px;
    max-width: 350px;
    position: fixed;
    padding: 12px 16px;
    border-radius: 6px;
    z-index: 10000;
    box-shadow: 0 4px 12px var(--cf-bg-overlay, rgba(0,0,0,0.5)); /* Added fallback */
    transition: all 0.3s ease-out;
    color: var(--cf-text-primary, #eee); /* Added fallback */
    background-color: var(--cf-bg-primary, #2c2c2c); /* Moved background here */
    border-left: 4px solid transparent;
    display: flex;
    align-items: center;
    gap: 10px;
}

.controller-notification::before {
    content: "🎮";
    font-size: 18px;
}

.controller-notification.error {
    /* background-color: var(--cf-bg-primary); */ /* Background set above */
    border-left-color: var(--cf-accent-red, #e54d4d); /* Added fallback */
    /* color: var(--cf-text-primary); */ /* Color set above */
}

.controller-notification.error::before {
    content: "⚠️";
}

.controller-notification.info {
    /* background-color: var(--cf-bg-primary); */
    border-left-color: var(--cf-brand-primary, #4c8eda); /* Added fallback */
    /* color: var(--cf-text-primary); */
}

.controller-notification.success {
    /* background-color: var(--cf-bg-primary); */
    border-left-color: var(--cf-brand-primary, #5cb85c); /* Added fallback */
    /* color: var(--cf-text-primary); */
}

.controller-notification.success::before {
    content: "✅";
}

.controller-notification.bottom-right {
    bottom: 20px;
    right: 20px;
    transform-origin: bottom right;
}

.controller-notification.bottom-left {
    bottom: 20px;
    left: 20px;
    transform-origin: bottom left;
}

.controller-notification.top-right {
    top: 20px;
    right: 20px;
    transform-origin: top right;
}

.controller-notification.top-left {
    top: 20px;
    left: 20px;
    transform-origin: top left;
}

.controller-notification.fade-in {
    animation: notification-fade-in 0.3s forwards;
}

.controller-notification.fade-out {
    animation: notification-fade-out 0.3s forwards;
}

@keyframes notification-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes notification-fade-out {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(10px) scale(0.9);
    }
}