/*
 * アプリ全体のレイアウト補正
 *
 * app-shell の外（ document.body 直下）に置かれる要素は、コンポーネントの
 * スタイルが届かないためここで面倒を見る。
 */

/*------------------------------------------------------------------------------
 * トースト
 *
 * uix のトーストはポジションごとの固定コンテナを document.body へ足し、
 * 位置をインラインスタイルで指定する。そのままだとアプリのメニューと重なる。
 *   - デスクトップ: 左端に幅 260px のサイドバー
 *   - モバイル（ 768px 以下）: 下端に高さ 56px のボトムナビゲーション
 * インラインスタイルより優先させる必要があるため !important を付ける。
 *
 * ログイン画面などの blank レイアウトにはどちらも無いため、
 * html[data-layout] が default のときだけずらす。
 *----------------------------------------------------------------------------*/

/* 左寄せのトーストはサイドバーの外側から始める */
html[data-layout="default"] [data-uix-toast-container$="-left"] {
	left: 284px !important;
}

@media (max-width: 768px) {
	/* モバイルではサイドバーが画面外に隠れるので、左端の余白に戻す */
	html[data-layout="default"] [data-uix-toast-container$="-left"] {
		left: 24px !important;
	}

	/* 下寄せのトーストはボトムナビゲーションの上に出す */
	html[data-layout="default"] [data-uix-toast-container^="bottom"] {
		bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
	}
}