/*
==========================================================
A SQUARE L INNOVATE DESIGN SYSTEM (ASLDS)
Version: 1.0.0
Component: Alert
Author: A Square L Innovate
Created: 2026

Description:
Reusable alert component for notifications,
feedback messages, warnings, success states,
and system announcements.

==========================================================
*/

/* ======================================================
   BASE ALERT
====================================================== */

.alert{
    display:flex;
    align-items:flex-start;
    gap:16px;

    width:100%;

    padding:18px 20px;

    border-radius:var(--radius-lg);

    border:1px solid transparent;

    position:relative;

    overflow:hidden;

    transition:var(--transition-normal);
}

/* ======================================================
   ICON
====================================================== */

.alert-icon{

    width:42px;
    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    flex-shrink:0;

    font-size:18px;

}

/* ======================================================
   CONTENT
====================================================== */

.alert-content{

    flex:1;

}

.alert-title{

    font-size:16px;

    font-weight:700;

    margin-bottom:6px;

    color:var(--white);

}

.alert-text{

    color:var(--gray-300);

    line-height:1.7;

    font-size:14px;

}

/* ======================================================
   CLOSE BUTTON
====================================================== */

.alert-close{

    background:none;

    border:none;

    color:inherit;

    cursor:pointer;

    font-size:18px;

    opacity:.7;

    transition:var(--transition-fast);

}

.alert-close:hover{

    opacity:1;

    transform:rotate(90deg);

}

/* ======================================================
   SUCCESS
====================================================== */

.alert-success{

    background:rgba(25,135,84,.12);

    border-color:rgba(25,135,84,.25);

}

.alert-success .alert-icon{

    background:rgba(25,135,84,.18);

    color:var(--success);

}

/* ======================================================
   WARNING
====================================================== */

.alert-warning{

    background:rgba(255,193,7,.12);

    border-color:rgba(255,193,7,.25);

}

.alert-warning .alert-icon{

    background:rgba(255,193,7,.18);

    color:var(--warning);

}

/* ======================================================
   DANGER
====================================================== */

.alert-danger{

    background:rgba(220,53,69,.12);

    border-color:rgba(220,53,69,.25);

}

.alert-danger .alert-icon{

    background:rgba(220,53,69,.18);

    color:var(--danger);

}

/* ======================================================
   INFO
====================================================== */

.alert-info{

    background:rgba(13,202,240,.12);

    border-color:rgba(13,202,240,.25);

}

.alert-info .alert-icon{

    background:rgba(13,202,240,.18);

    color:var(--info);

}

/* ======================================================
   PRIMARY
====================================================== */

.alert-primary{

    background:rgba(212,175,55,.10);

    border-color:rgba(212,175,55,.25);

}