/*
 * ===================================
 * UTKNotification.uss
 * 알림 창 스타일
 * ===================================
 */

/* ===================================
   Base Container
   =================================== */

.utk-notification {
    flex-direction: column;
    width: 320px;
    padding: var(--space-m);
    background-color: var(--color-bg-modal);
    border-radius: var(--radius-m);
    border-width: var(--border-width);
    border-color: var(--color-border);
}

/* ===================================
   Type Variants
   =================================== */

.utk-notification--info {
    border-left-width: 4px;
    border-left-color: var(--color-state-info);
}

.utk-notification--success {
    border-left-width: 4px;
    border-left-color: var(--color-state-success);
}

.utk-notification--warning {
    border-left-width: 4px;
    border-left-color: var(--color-state-warning);
}

.utk-notification--error {
    border-left-width: 4px;
    border-left-color: var(--color-state-error);
}

/* ===================================
   Header
   =================================== */

.utk-notification__header {
    flex-direction: row;
    align-items: center;
    margin-bottom: var(--space-s);
}

/* ===================================
   Icon
   =================================== */

.utk-notification__icon {
    width: 20px;
    height: 20px;
    margin-right: var(--space-s);
    font-size: 14px;
    -unity-text-align: middle-center;
}

.utk-notification--info .utk-notification__icon {
    color: var(--color-state-info);
}

.utk-notification--success .utk-notification__icon {
    color: var(--color-state-success);
}

.utk-notification--warning .utk-notification__icon {
    color: var(--color-state-warning);
}

.utk-notification--error .utk-notification__icon {
    color: var(--color-state-error);
}

/* ===================================
   Title
   =================================== */

.utk-notification__title {
    flex-grow: 1;
    font-size: var(--font-size-body1);
    color: var(--color-text-primary);
    -unity-font-style: bold;
}

/* ===================================
   Close Button
   =================================== */

.utk-notification__close-btn {
    width: 16px;
    height: 16px;
    background-color: transparent;
    border-width: 0;
    color: var(--color-text-secondary);
    font-size: 10px;
    border-radius: var(--radius-s);
}

.utk-notification__close-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-text-primary);
}

/* ===================================
   Message
   =================================== */

.utk-notification__message {
    font-size: var(--font-size-body2);
    color: var(--color-text-secondary);
    white-space: normal;
    margin-bottom: var(--space-s);
}

/* ===================================
   Actions
   =================================== */

.utk-notification__actions {
    flex-direction: row;
    justify-content: flex-end;
    margin-top: var(--space-s);
}