/* 登録フォーム用 ver.5.6 over */

/* ▼基礎 */
:where(form.changeName){

	/* ★カスタム */
	--form-background: transparent; /* inputとselectの背景 */
	--form-color: inherit; /* inputとselectの文字色 */
	--form-padding: 2px; /* inputとselectの内側余白 */
	--form-border: 1px solid #cfc3b2; /* inputとselectのボーダー */
	--form-border-radius: 1.4rem; /* inputとselectの角丸具合 */
	--form-focus-outline: 2px solid #dff1f4; /* inputとselectのフォーカス時のアウトライン */

	--button-background: #111;  /* buttonの背景 */
	--button-color: #FFF;  /* buttonの文字色 */
	--button-padding: 10px;  /* buttonの内側余白 */
	--button-border: 0;  /* inputとselectの背景 */
	--button-border-radius: 0;  /* buttonの角丸具合 */
	--button-focus-outline: 2px solid #dff1f4; /* buttonのフォーカス時のアウトライン */

	--layout-gap: .5em; /* 共通余白 */

	--btn-input: 'input'; /* 保存ボタンの文言 */
	--btn-reset: 'reset'; /* 削除ボタンの文言 */

	--message-bg: #000; /* JSのactionメッセージ背景 */
	--message-font: #fff; /* JSのactionメッセージ文字色 */
	--message-border: none; /* JSのactionメッセージボーダー */

	/* ★ベースCSS */

	width:fit-content; max-width: 100%; margin: 1rem 0; box-sizing: border-box;

	& :where(:is(fieldset,legend, ul, p, div)){
		margin:0; padding:0; border:none; background: transparent none;
		font-weight: normal; font-style: normal; box-sizing: border-box; 
	}

	& :where(fieldset){
		min-inline-size: 0;
	}

	& :where(legend){
		font-weight: 600;
		margin-bottom:var(--layout-gap, .5em);
	}

	& :where(:is(ul,li)){
		list-style: none; 
	}

	& :where(:is(input,select,option, button)){
		vertical-align: middle;
		font-size: 100%; font-family:inherit;
		max-width: 100%; line-height:1; box-sizing: border-box; 
	}

	& :where(:is(label, select, button, input[type="submit"])){
		cursor:pointer; 
	}

	& :is(input[type="text"], select){
		background: var(--form-background);
		color: var(--form-color);
		padding: var(--form-padding);
		border: var(--form-border);
		border-radius: var(--form-border-radius);
		&:is(:focus-visible, :active){ outline: var(--form-focus-outline); }
	}

	& button{
		touch-action:manipulation;
		background: var(--button-background);
		color: var(--button-color);
		padding: var(--button-padding);
		border: var(--button-border);
		border-radius: var(--button-border-radius);
		&:is(:focus-visible, :active){ outline: var(--button-focus-outline); }
	}

	& :where(.dream-noCookie){ 
		margin-bottom: 1em; font-size: small; 
	}

	& ul:not([class]){ 
		display: grid; gap: var(--layout-gap, .5em);
		align-items: center;
		&>li{
			display:flex; align-items: center; gap: 0 var(--layout-gap); 
			& label{ font-size:82%; line-height:1.2;  }
		}
	}

	& .process{
		margin-top: var(--layout-gap, .5em);
		display: flex; flex-flow: row nowrap;
		justify-content: center; align-items: center;
		gap: var(--layout-gap, .5em);
		&>li:first-child{ order: 1;}
		& button{ white-space: nowrap; }
	}

	& #dreamphp-save-message[popover]{
		position: fixed; inset: 2vw 0 auto; 
		margin:auto; padding: 1em; line-height:1; 
		background: var(--message-bg); color: var(--message-font); border: var(--message-border);
		animation: openAnimation .5s;
		&.dreamphp-message-close{
			 animation: closeAnimation .5s forwards; 
		}
	}

	&.dreamphp-action ul:not([class]){
		animation: .8s saveAnimation;
	}
}

@keyframes saveAnimation {
	0% { opacity:0; }
	100%{ opacity:100%; }
}
@keyframes openAnimation {
	0% { opacity:0; transform: translateY(calc( -3em + 2vw)) }
	100%{ opacity:100%; transform: translateY(0) }
}
@keyframes closeAnimation {
	0% { opacity: 100%; transform: translateY(0) }
	100%{ opacity: 0; transform: translateY(calc( -3em + 2vw)) }
}
/* 提供既定デザイン ==================== */
div:has(form.changeName){

	/* ★カスタム */
	--form-width: 8em; /* レイアウトがflex時のinputやselectの横幅 */
	--label-width: 4em; /* ラベル位置がフォームの左or右のときのラベル横幅 */

	/* ★内容 */
	&.dreamphp-layout-flex{ 
		ul:not([class]){
			display:flex;flex-flow:row wrap;
			:is(input,select){ width:var(--form-width); }
		}
		&.dreamphp-position-center{
			ul:not([class]){justify-content:center}
		}
		&.dreamphp-position-right {
			ul:not([class]) { justify-content: end }
		}
	}
	&.dreamphp-layout-repeat form.changeName {
		width: auto;
		& ul:not([class]) {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(calc(var(--label-width, 4em) + 5em), 1fr));
			:is(input, select) { width: 100% }
		}
	}
	&.dreamphp-layout-1column ul:not([class]) {
		grid-template-columns: 1fr;
		:is(input, select) { width: 100% }
	}
	&.dreamphp-layout-2column ul:not([class]) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		:is(input, select) { width: 100% }
	}
	&.dreamphp-layout-3column ul:not([class]) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		:is(input, select) { width: 100% }
	}
	&.dreamphp-label-top ul:not([class])>li {
		flex-flow: column nowrap;
		align-items: start
	}
	&.dreamphp-label-bottom ul:not([class])>li {
		flex-flow: column-reverse nowrap;
		align-items: start
	}
	&.dreamphp-label-left ul:not([class])>li,
	&.dreamphp-label-right ul:not([class])>li {
		flex-flow: row nowrap; align-items: center;
		& label { width: var(--label-width, 4em); text-align: right }
		& :is(input, select) { flex: 1 1 5em }
	}
	&.dreamphp-label-right ul:not([class])>li {
		& label { order: 1; text-align: left }
	}
	&.dreamphp-process-center .process {
		justify-content: center
	}
	&.dreamphp-process-right .process {
		justify-content: flex-end
	}
	&.dreamphp-process-left .process {
		justify-content: flex-start
	}
	&.dreamphp-process-between .process {
		justify-content: space-between
	}
	&.dreamphp-process-column fieldset {
		display: grid; gap: 15px;
		grid-template-columns: 1fr fit-content(20%);
		align-items: end
	}
	&.dreamphp-position-left form {
		margin-left: 0;
		margin-right: auto
	}
	&.dreamphp-position-right form {
		margin-left: auto;
		margin-right: 0
	}
	&.dreamphp-position-center form {
		margin-left: auto;
		margin-right: auto
	}
	&.dreamphp-process-column fieldset legend, &.dreamphp-legend-hidden legend {
		position: fixed!important;
		top: 0;
		left: 0;
		width: 4px!important;
		height: 4px!important;
		opacity: 0!important;
		overflow: hidden!important;
		border: none!important;
		margin: 0;
		padding: 0;
		display: block!important;
		visibility: visible!important
	}
	&.dreamphp-button-editer {
		& ul.process button {
			span { display: none }
			&[value="input"]::before { content: var(--btn-input) }
			&[value="reset"]::before { content: var(--btn-reset) }
		}
	}
}