/*-------------------------------*/

/*
@mixin stitch_beige {		//@include stitch_beige;
	border-image-source: url(../image/stitch_beige.svg);
	border-image-slice: 30;
	border-image-width: 30px;
	border-image-repeat: round;
}
@mixin stitch_beige_inside {		//@include stitch_beige_inside;
	border-image-source: url(../image/stitch_beige_inside.svg);
	border-image-slice: 30;
	border-image-width: 30px;
	border-image-repeat: round;
}
*/

section.config {
	--color-back: #513a29;
	--color-back2: #513a27;
	--color-back3: #c37c42;
	--color-border: #6c5a40;
	--color-border2: #53341a;
}
/*	select	*/
section.config {
	div.select.ui {
		display: inline-block;
		border-image-source: url(../image/stitch_beige_inside.svg);
		border-image-slice: 30;
		border-image-width: 30px;
		border-image-repeat: round;
		padding: 11px 13px;
		> select {
			background-color: #eee3c6;
			padding: 10px;
			font-size: 1rem;
			color: #322;
			outline: none;
			border-style: solid;
			border-width: 1px;
			border-color: #cba #fee #fee #cba;
		}
	}
}
/*	text	*/
section.config {
	div.input.ui {
		border-image-source: url(../image/stitch_beige_inside.svg);
		border-image-slice: 30;
		border-image-width: 30px;
		border-image-repeat: round;
		padding: 11px 13px;
		> input {
			appearance: none;
			background-color: #eee3c6;
			padding: 10px;
			font-size: 1rem;
			color: #322;
			outline: none;
			border-style: solid;
			border-width: 1px;
			border-color: #cba #fee #fee #cba;
		}
	}
}
/*	textarea	*/
section.config {
	div.textarea.ui {
		border-image-source: url(../image/stitch_beige_inside.svg);
		border-image-slice: 30;
		border-image-width: 30px;
		border-image-repeat: round;
		padding: 11px 13px;
		> textarea {
			width: 100%;
			appearance: none;
			background-color: #eee3c6;
			padding: 10px;
			font-size: 1rem;
			color: #322;
			outline: none;
			border-style: solid;
			border-width: 1px;
			border-color: #cba #fee #fee #cba;
		}
		> div {
			background-color: #eee3c6;
			padding: 10px;
			font-size: 1rem;
			color: #322;
			outline: none;
			border-style: solid;
			border-width: 1px;
			border-color: #cba #fee #fee #cba;
		}
	}
}
/*	button	*/
section.config {
	input[type="submit"].ui,
	input[type="reset"].ui,
	button.ui {
		user-select: none;
		appearance: none;
		height: 32px;
		border: solid 1px var(--color-border);
		border-radius: 4px;
		cursor: pointer;
		font-size: 0.9rem;
		line-height: 1;
		background-color: var(--color-back);
		color: #fff;
		padding: 0 10px;
		transition: 0.2s;
		&:hover {
			opacity: 0.7;
		}
		&.small {
			height: 22px;
			font-size: 0.8rem;
		}
	}
}
/*	checkbox,radio	*/
section.config {
	div.checkbox.ui,
	span.radio.ui {
		user-select: none;
		appearance: none;
		display: inline-flex;
		line-height: 39px;
		border-radius: 4px;
		background-color: var(--color-back2);
		&:has(input:checked) {
			background-color: var(--color-back3);
		}
		> input {
			accent-color: var(--color-back3);
			margin-left: 10px;
		}
		> label {
			user-select: none;
			appearance: none;
			font-size: 0.9rem;
			color: #fff;
			padding: 5px 10px 5px 5px;
			cursor: pointer;
		}
	}
}
/* range	*/
section.config {
	input[type="range"].ui {
		user-select: none;
		accent-color: var(--color-back3);
		cursor: pointer;
	}
}
/* <a href="">	*/
section.config {
	a.ui {
		user-select: none;
		appearance: none;
		display: inline-flex;
		align-items: center;
		box-sizing: border-box;
		height: 32px;
		padding: 9px 18px;
		font-size: 1rem;
		line-height: 1;
		background-color: var(--color-back);
		color: #fff;
		border-radius: 3px;
		cursor: pointer;
		text-decoration: none;
		white-space: nowrap;
		&:hover {
			opacity: 0.7;
		}
		&.small {
			height: 20px;
			padding: 0 5px;
			margin: 0 1px;
			font-size: 1.3rem;
		}
		&.mini {
			height: 16px;
			padding: 0 1px;
			margin: 0 1px;
			font-size: 1.2rem;
		}
		&.lite {
			background-color: #fff;
			color: var(--color-back);
			&:hover {
				color: #000;
				opacity: 0.7;
			}
		}
	}
}
/* fileSelect	*/
section.config {
	.fileSelect {
		user-select: none;
		margin: 0 0 8px 0;
		position: relative;
		overflow: hidden;
		border: solid 3px var(--color-border);
		border-radius: 4px;
		background-color: var(--color-back);
		padding: 50px 10px 10px 10px;
		text-align: center;
		min-width: 200px;
		cursor: pointer;
		transition: 0.2s;
		&:hover {
			opacity: 0.7;
		}
		> p {
			font-size: 1.3rem;
			color: #fff;
			line-height: 1.2;
			font-weight: 400;
		}
		input[type="file"] {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			cursor: pointer;
			opacity: 0;
		}
		> div {
			margin-top: 40px;
			font-size: 1.3rem;
			line-height: 1.2;
			color: #fff;
			font-weight: 300;
			border-radius: 3px;
			background-color: var(--color-border);
		}
	}
}