/* ==========================================================================
   Alert 组件样式
   用于页面内的固定提示框
   基于设计系统令牌
   ========================================================================== */

/* Alert 基础样式 */
.alert {
    position: relative;
    padding: var(--spacing-4);
    border-radius: var(--radius-base);
    margin-bottom: var(--spacing-4);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    border: 1px solid transparent;
    transition: all var(--transition-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
}

/* Alert 图标 */
.alert__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.alert__icon .icon {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* Alert 内容区域 */
.alert__content {
    flex: 1;
    min-width: 0;
}

.alert__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    color: inherit;
    margin-bottom: var(--spacing-1);
}

.alert__description {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    color: inherit;
    opacity: 0.85;
}

/* Alert 关闭按钮 */
.alert__close {
    background: none;
    border: none;
    padding: var(--spacing-1) var(--spacing-2);
    margin: calc(var(--spacing-1) * -1) calc(var(--spacing-1) * -1) calc(var(--spacing-1) * -1) var(--spacing-2);
    cursor: pointer;
    color: inherit;
    font-size: var(--font-size-lg);
    line-height: 1;
    flex-shrink: 0;
    align-self: flex-start;
    opacity: 0.7;
    transition: opacity var(--transition-base);
    border-radius: var(--radius-sm);
}

.alert__close:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.05);
}

/* ============================================================
   Alert 类型 - 基于设计系统颜色变量
   ============================================================ */

/* 信息类型 */
.alert--info {
    background-color: var(--color-info-bg);
    border-color: var(--color-info-border);
    color: var(--color-info);
}

/* 成功类型 */
.alert--success {
    background-color: var(--color-success-bg);
    border-color: var(--color-success-border);
    color: var(--color-success);
}

/* 警告类型 */
.alert--warning {
    background-color: var(--color-warning-bg);
    border-color: var(--color-warning-border);
    color: var(--color-warning);
}

/* 错误类型 */
.alert--error {
    background-color: var(--color-error-bg);
    border-color: var(--color-error-border);
    color: var(--color-error);
}

/* 紫色提示 */
.alert--accent-1 {
    background-color: var(--color-accent-1-bg);
    border-color: var(--color-accent-1-border);
    color: var(--color-accent-1);
}

/* 浅蓝色提示 */
.alert--accent-2 {
    background-color: var(--color-accent-2-bg);
    border-color: var(--color-accent-2-border);
    color: var(--color-accent-2);
}

/* 中性提示 */
.alert--neutral {
    background-color: var(--color-neutral-bg-secondary);
    border-color: var(--color-neutral-border);
    color: var(--color-neutral-text);
}

/* ============================================================
   Alert 变体
   ============================================================ */

/* 填充样式 - 深色背景 */
.alert--filled {
    color: white !important;
    border-color: transparent !important;
}

.alert--filled.alert--info {
    background-color: var(--color-info);
}

.alert--filled.alert--success {
    background-color: var(--color-success);
}

.alert--filled.alert--warning {
    background-color: var(--color-warning);
}

.alert--filled.alert--error {
    background-color: var(--color-error);
}

.alert--filled.alert--accent-1 {
    background-color: var(--color-accent-1);
}

.alert--filled.alert--accent-2 {
    background-color: var(--color-accent-2);
}

.alert--filled.alert--neutral {
    background-color: var(--color-neutral-title);
}

.alert--filled .alert__description {
    opacity: 0.9;
}

.alert--filled .alert__close {
    color: white !important;
}

.alert--filled .alert__close:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* 轮廓样式 - 透明背景，只有边框 */
.alert--outlined {
    background-color: transparent !important;
}

.alert--outlined.alert--info {
    border-color: var(--color-info);
    color: var(--color-info);
}

.alert--outlined.alert--success {
    border-color: var(--color-success);
    color: var(--color-success);
}

.alert--outlined.alert--warning {
    border-color: var(--color-warning);
    color: var(--color-warning);
}

.alert--outlined.alert--error {
    border-color: var(--color-error);
    color: var(--color-error);
}

.alert--outlined.alert--accent-1 {
    border-color: var(--color-accent-1);
    color: var(--color-accent-1);
}

.alert--outlined.alert--accent-2 {
    border-color: var(--color-accent-2);
    color: var(--color-accent-2);
}

.alert--outlined.alert--neutral {
    border-color: var(--color-neutral-border);
    color: var(--color-neutral-text);
}

/* 尺寸变体 */
.alert--small {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-sm);
}

.alert--small .alert__icon {
    width: 16px;
    height: 16px;
    margin-top: 1px;
}

.alert--small .alert__title {
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-0-5);
}

.alert--small .alert__description {
    font-size: var(--font-size-xs);
}

.alert--small .alert__close {
    font-size: var(--font-size-base);
    padding: var(--spacing-0-5);
    margin: calc(var(--spacing-0-5) * -1);
}

.alert--large {
    padding: var(--spacing-5) var(--spacing-6);
    border-radius: var(--radius-md);
}

.alert--large .alert__icon {
    width: 24px;
    height: 24px;
    margin-top: 3px;
}

.alert--large .alert__title {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-2);
}

.alert--large .alert__description {
    font-size: var(--font-size-base);
}

/* 横幅样式 - 用于页面顶部 */
.alert--banner {
    border-radius: 0;
    margin-bottom: 0;
    border-left: none;
    border-right: none;
    border-top: none;
}

/* 内联样式 - 用于表单验证等 */
.alert--inline {
    display: inline-flex;
    margin-bottom: 0;
    vertical-align: middle;
    align-items: center;
    gap: var(--spacing-1)
}

/* 可关闭 */
/*.alert--closable {*/
/*    padding-right: var(--spacing-10);*/
/*}*/

/* 图标居中 */
.alert--icon-center {
    align-items: center;
}

.alert--icon-center .alert__icon {
    margin-top: 0;
}

/* 无图标 */
.alert--no-icon .alert__icon {
    display: none;
}

/* 可点击 */
.alert--clickable {
    cursor: pointer;
}

.alert--clickable:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* 响应式调整 */
@media (max-width: 768px) {
    .alert {
        padding: var(--spacing-3);
        flex-wrap: wrap;
    }

    .alert__content {
        min-width: calc(100% - 32px);
    }
}