@use './_mixin' as mixin;

/* 参考
	- https://github.com/necolas/normalize.css/blob/master/normalize.css
	- https://github.com/filipelinhares/ress/blob/master/ress.css
	- https://elad2412.github.io/the-new-css-reset/
*/

/* ------------------------------------------------------------
	基本方針: reset.cssの段階では、できるだけブラウザの標準スタイルに従う。

	  - box-sizing: border-box; にセット
	  - padding は ブラウザ標準スタイルのまま
	  - margin はすべて 0 にリセット
------------------------------------------------------------ */
*,
::before,
::after {
	box-sizing: border-box;
}

* {
	margin: 0;
}

/* ------------------------------------------------------------
	Texts
------------------------------------------------------------ */

/* テキストのオーバーフローを回避 */
@include mixin.maybe_where('p, h1, h2, h3, h4, h5, h6', '') {
	overflow-wrap: break-word;
}

/* ルビのサイズ統一 */
rt {
	font-size: 50%;
}

/* ------------------------------------------------------------
	Medias
------------------------------------------------------------ */
@include mixin.maybe_where('img', '') {
	/* 親要素をはみ出さないように */
	max-inline-size: 100%;

	/* 隙間ができるのを防ぐ。( インラインな img, svg を考慮し、 display はいじらない。) */
	vertical-align: middle;

	// アスペクト比を保持
	block-size: auto;
}

/* img 以外のメディア系も飛び出さないように。 ( audio, embed, object にも必要か...? ) */
@include mixin.maybe_where('iframe, audio, picture, video', '') {
	display: block;
	max-inline-size: 100%;
}

@include mixin.maybe_where('iframe', '') {
	border: none;
}

/* ------------------------------------------------------------
	Form fields
	  - 基本要素のフォントとカラーをリセット
	  - テキストエリアの水平リサイズを無効に
	  - カーソルのセット
------------------------------------------------------------ */
@include mixin.maybe_where('input, button, textarea, select', '') {
	font: inherit;
	color: inherit;
	text-transform: none;
}

/* テキストエリアの水平リサイズを無効に */
textarea {
	resize: vertical;
}

/* ------------------------------------------------------------
	cursor 初期セット
------------------------------------------------------------ */
// :where([type='button'], [type='reset'], [type='submit'], [type='radio'], [type='checkbox']),
// :where([t[role='option'], [role='button'], [aria-controls]),
button,
label,
select,
summary {
	cursor: pointer;
}

:disabled {
	cursor: not-allowed;
}

[aria-busy='true'] {
	cursor: progress;
}