/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓


	ALBUMブロック

	**このブロックが持つのは「並べ方」だけである。** タイル1枚はFILEブロック
	そのものなので、サムネイル・種別アイコン・操作ボタン・枠線・角丸は
	`base.css`のFILEブロックの規則が描く。ここからFILEブロックの内部を
	上書きしない（`.elsaAlbumTile .elsaFileBlock { ... }`のような書き方を
	しない）。親から子ブロックを装飾しない規則は
	`tests/field_block_style_test.php`が固定している。

	タイルの寸法もCSSで縛らない。PHP側がFILEブロック自身の`drop_width`・
	`drop_height`へ渡し、FILEブロックが自分の変数で決める。


┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

/*
	ルート要素は縦マージンを持たない。ブロック同士の間隔は表示設定から
	流れる`--elsa-block-spacing`だけが決める（tests/block_root_spacing_test.php）。
*/
.elsaAlbumBlock {
	display: block;
	width: 100%;
}

/*
	タイルはflexで折り返す。gridの固定列数にしないのは、スマートフォン幅で
	1列へ落ちる境目を画面ごとに決め直さずに済ませるためである。
	`--elsa-album-tile-width`はPHPが実際のタイル幅を入れる。
*/
.elsaAlbumTiles {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
}

.elsaAlbumTile {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 0 0 auto;
	width: var(--elsa-album-tile-width, 200px);
	max-width: 100%;
	min-width: 0;
}

/*
	ファイル名。V3の一覧（LIST表示）で出していた情報のうち、名前だけを
	常に見える位置へ残す。登録日とサイズはタイルのツールチップにある。
	長い名前でタイルの幅を押し広げない。
*/
.elsaAlbumTileName {
	margin: 0;
	width: 100%;
	font-size: 0.85em;
	line-height: 1.3;
	color: #47545e;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.elsaAlbumEmpty {
	margin: 0;
	color: #47545e;
}

/*
	スマートフォン幅の折り返しは`flex-wrap`に任せ、@mediaの分岐を作らない。
	タイルは`max-width: 100%`を持つので、375pxの画面では1枚ずつ縦に並び、
	横スクロールは出ない。FILEブロック側の実寸を上書きしないため、
	ここで幅を100%へ広げることもしない（FILEブロックの`drop_width`は
	px指定であり、外枠だけ広げると枠とサムネイルがずれる）。
*/