/*
//============================================================================================
// system name    : －－－－ 
// program name   : bAsComponent_TypicalNotice StyleSheet
// file name      : bAsComponent_TypicalNotice.css
// summary        : 通知（簡易表示） コンポーネント用スタイルシート
//--------------------------------------------------------------------------------------------
// author         : 👍bAs)Yoshi
// creation date  : 2024/10/21
// version        : 1.00
//--------------------------------------------------------------------------------------------
// change history : 2024/10/21 👍bAs)Yoshi 新規作成
// 
// Copyright 2024 bEST ANSWER's Inc.
//============================================================================================
*/




/* ===================================================================== */
/* （変数定義）****************************** STA */
:root {
    /* 〔通知（簡易表示）通知アイテム：ヘッダーのアイコン用）〕 フォントサイズ */
    --bAs_FontSize_typicalNotice-item-icon: 17px;
    /* 〔通知（簡易表示）通知アイテム：ヘッダーのタイトル用）〕 フォントサイズ */
    --bAs_FontSize_typicalNotice-item-title: 17px;
    /* 〔通知（簡易表示）通知アイテム：メッセージ用）〕 フォントサイズ */
    --bAs_FontSize_typicalNotice-item-message: 14px;
}
/* （変数定義）****************************** END */



/* 
--------------------------------------------------------------------- 
 通知（簡易表示） コンポーネント用STYLE　　　※JavaScriptで動的に追加した要素にコンポーネント個別の分離CSSが効かないので、個別のCSSじゃない（サイトで読込んでいるようなグローバル）CSSに記述する
--------------------------------------------------------------------- 
/*〔通知（簡易表示）通知アイテム用）〕*/
.bAs-typicalNotice-item {
    display: flex;
    flex-direction: column;
    padding: 6px 10px;
    margin: 0;
    border: 1px solid black;
    border-radius: 6px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, .55);
}

/*〔通知（簡易表示）通知アイテム：ヘッダー用）〕*/
.bAs-typicalNotice-item-header {
    display: flex;
    flex-direction: row;
    border-bottom: 0.5px solid #666666;
}

/*〔通知（簡易表示）通知アイテム：ヘッダーのアイコン用）〕*/
.bAs-typicalNotice-item-icon {
    /*font-size: 17px;*/
    font-size: var(--bAs_FontSize_typicalNotice-item-icon);
    margin-right: 3px;
}
/*〔通知（簡易表示）通知アイテム：ヘッダーのタイトル用）〕*/
.bAs-typicalNotice-item-title {
    /*font-size: 17px;*/
    font-size: var(--bAs_FontSize_typicalNotice-item-title);
}

/*〔通知（簡易表示）通知アイテム：メッセージ用）〕*/
.bAs-typicalNotice-item-message {
    /*font-size: 14px;*/
    font-size: var(--bAs_FontSize_typicalNotice-item-message);
    margin-top: 10px;
    padding: 0 5px;
}


/*〔通知（簡易表示）通知アイテム -> 表示アニメーション用）〕*/
.bAs-typicalNotice-show-animated {
    animation: bAstypicalNoticefadeIn 0.5s; /* アニメーションの時間を設定 */
}

@keyframes bAstypicalNoticefadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}




/* （通知ヘッダー部） ------------------------ */
/*.bAs-BubblingNotice01-header {
    display: flex;
    flex-direction: row;
    border-bottom: 0.5px solid #666666;
}*/

/* （通知ヘッダー部：通知アイコン） */
/*.bAs-BubblingNotice01-icon {
    font-size: 17px;
    margin-right: 3px;
}*/
/* （通知ヘッダー部：通知タイトル） */
/*.bAs-BubblingNotice01-title {
    font-size: 17px;
}*/


/* （通知メッセージ部） ---------------------- */
/*.bAs-BubblingNotice01-message {
    font-size: 14px;
    margin-top: 10px;
    padding: 0 5px;
}*/


/* （通知種別毎の設定） ---------------------- */
/* （通知種別：情報） */
.bAs-typicalNotice-info {
    border-color: darkblue;
    background-color: lightblue;
    color: navy;
}

/* （通知種別：成功） */
.bAs-typicalNotice-success {
    border-color: green;
    background-color: #ccffcc;
    color: darkgreen;
}

/* （通知種別：警告） */
.bAs-typicalNotice-warn {
    border-color: #FF6600;
    background-color: gold;
    color: black;
}

/* （通知種別：エラー） */
.bAs-typicalNotice-error {
    border-color: red;
    background-color: #FF97C2;
    color: red;
}

/* （通知種別：通常） */
.bAs-typicalNotice-normal {
    border-color: black;
    background-color: #DDDDDD;
    color: black;
}
/* <<<<< 通知（簡易表示） コンポーネント用STYLE 【END】 */