/*
//============================================================================================
// system name    : －－－－ 
// program name   : bAsComponent_BubblingNotice StyleSheet
// file name      : bAsComponent_BubblingNotice.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.
//============================================================================================
*/




/* 
--------------------------------------------------------------------- 
 通知（バブリング表示） コンポーネント用STYLE　　　※JavaScriptで動的に追加した要素にコンポーネント個別の分離CSSが効かないので、個別のCSSじゃない（サイトで読込んでいるようなグローバル）CSSに記述する
--------------------------------------------------------------------- 
*/
.bAs-bubblingNotice-lt {
    left: 5px;
    top: 5px;
    flex-direction: column;
    align-items: start;
}

.bAs-bubblingNotice-rt {
    right: 5px;
    top: 5px;
    flex-direction: column;
    align-items: end;
}

.bAs-bubblingNotice-lb {
    left: 5px;
    bottom: 5px;
    flex-direction: column-reverse;
    align-items: start;
}

.bAs-bubblingNotice-rb {
    right: 5px;
    bottom: 5px;
    flex-direction: column-reverse;
    align-items: end;
}


/*〔通知（バブリング表示）通知アイテムのマージン設定（左上表示、右上表示用）〕*/
.bAs-bubblingNotice-lt .bAs-bubblingNotice-item,
.bAs-bubblingNotice-rt .bAs-bubblingNotice-item {
    margin: 0 0 7px 0;
}
/*〔通知（バブリング表示）通知アイテムのマージン設定（左下表示、右下表示用）〕*/
.bAs-bubblingNotice-lb .bAs-bubblingNotice-item,
.bAs-bubblingNotice-rb .bAs-bubblingNotice-item {
    margin: 7px 0 0 0;
}

/*〔通知（バブリング表示）通知アイテム用）〕*/
.bAs-bubblingNotice-item {
    min-width: 200px;
    padding: 5px 8px;
    border-radius: 7px;
    box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, .3);
}

    /*〔通知（バブリング表示）通知アイテム：通常通知用 基本（背景色、文字色）設定）〕*/
    .bAs-bubblingNotice-item.bAs-bubblingNotice-normal {
        background-color: whitesmoke;
        color: black;
    }
        /*〔通知（バブリング表示）通知アイテム：通常通知のヘッダー用）〕*/
        .bAs-bubblingNotice-item.bAs-bubblingNotice-normal .bAs-bubblingNotice-item-header {
            border-bottom: 1px solid black;
        }

    /*〔通知（バブリング表示）通知アイテム：情報通知用 基本（背景色、文字色）設定）〕*/
    .bAs-bubblingNotice-item.bAs-bubblingNotice-info {
        background-color: lightcyan;
        color: mediumblue;
    }
        /*〔通知（バブリング表示）通知アイテム：情報通知のヘッダー用）〕*/
        .bAs-bubblingNotice-item.bAs-bubblingNotice-info .bAs-bubblingNotice-item-header {
            border-bottom: 1px solid mediumblue;
        }

    /*〔通知（バブリング表示）通知アイテム：成功通知用 基本（背景色、文字色）設定）〕*/
    .bAs-bubblingNotice-item.bAs-bubblingNotice-success {
        background-color: #ccffcc;
        color: darkgreen;
    }
        /*〔通知（バブリング表示）通知アイテム：成功通知のヘッダー用）〕*/
        .bAs-bubblingNotice-item.bAs-bubblingNotice-success .bAs-bubblingNotice-item-header {
            border-bottom: 1px solid darkgreen;
        }

    /*〔通知（バブリング表示）通知アイテム：警告通知用 基本（背景色、文字色）設定）〕*/
    .bAs-bubblingNotice-item.bAs-bubblingNotice-warn {
        background-color: lemonchiffon;
        color: chocolate;
    }
        /*〔通知（バブリング表示）通知アイテム：警告通知のヘッダー用）〕*/
        .bAs-bubblingNotice-item.bAs-bubblingNotice-warn .bAs-bubblingNotice-item-header {
            border-bottom: 1px solid chocolate;
        }

    /*〔通知（バブリング表示）通知アイテム：エラー通知用 基本（背景色、文字色）設定）〕*/
    .bAs-bubblingNotice-item.bAs-bubblingNotice-error {
        background-color: mistyrose;
        color: red;
    }
        /*〔通知（バブリング表示）通知アイテム：エラー通知のヘッダー用）〕*/
        .bAs-bubblingNotice-item.bAs-bubblingNotice-error .bAs-bubblingNotice-item-header {
            border-bottom: 1px solid red;
        }


/*〔通知（バブリング表示）通知アイテム：ヘッダーのアイコン用）〕*/
.bAs-bubblingNotice-item-icon {
}

/*〔通知（バブリング表示）通知アイテム：ヘッダーのタイトル用）〕*/
.bAs-bubblingNotice-item-title {
}

/*〔通知（バブリング表示）通知アイテム：メッセージ用）〕*/
.bAs-bubblingNotice-item-message {
    margin-top: 5px;
    font-size: 16px;
}


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

@keyframes bAsbubblingNoticefadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/* <<<<< 通知（バブリング表示） コンポーネント用STYLE 【END】 */