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

/*
@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 {
	--color-back: #513a29;
	--color-back2: rgba(81,58,41,1);
	--color-back3: rgba(81,58,41,0.3);
	--color-border: #6c5a40;
	--color-border2: #53341a;
}
/*	select	*/
section {
	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: 0.9rem;
			color: #322;
			outline: none;
			border-style: solid;
			border-width: 1px;
			border-color: #cba #fee #fee #cba;
		}
	}
}
/*	text	*/
section {
	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: 5px;
			font-size: 0.9rem;
			color: #322;
			outline: none;
			border-style: solid;
			border-width: 1px;
			border-color: #cba #fee #fee #cba;
			&[type="number"] {
				padding: 5px 0 5px 5px;
			}
		}
	}
}
/*	textarea	*/
section {
	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: 0.9rem;
			color: #322;
			outline: none;
			border-style: solid;
			border-width: 1px;
			border-color: #cba #fee #fee #cba;
		}
		> div {
			background-color: #eee3c6;
			padding: 10px;
			font-size: 0.9rem;
			color: #322;
			outline: none;
			border-style: solid;
			border-width: 1px;
			border-color: #cba #fee #fee #cba;
		}
	}
}
/*	button	*/
section {
	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;
		}
	}
}
/*	text 	*/
section {
	input[type="text"].ui {
		height: 30px;
		border: solid 1px #7b6246;
		border-radius: 4px;
		padding: 0 0 0 10px;
		font-size: 1.4rem;
		background-color: transparent;
		color: #7b6246;
		outline: 0;
	}
}
/*	checkbox,radio	*/
section {
	div.checkbox.ui,
	span.radio.ui {
		user-select: none;
		appearance: none;
		display: inline-block;
		border-radius: 4px;
		background-color: var(--color-back3);
		&:has(input:checked) {
			background-color: var(--color-back2);
		}
		> input {
			accent-color: var(--color-back2);
			margin-left: 10px;
		}
		> label {
			display: inline-block;
			user-select: none;
			appearance: none;
			font-size: 0.9rem;
			color: #fff;
			line-height: 39px;
			padding: 2px 10px 5px 5px;
			cursor: pointer;
		}
		&.small {
			> label {
				font-size: 0.8rem;
				line-height: 20px;
				padding: 1px 10px 5px 5px;
			}
		}
	}
}
section {
	span.radio.uiToggle {
		user-select: none;
		appearance: none;
		display: flex;
		align-items: center;
		line-height: 30px;
		border-radius: 100px;
		background-color: var(--color-back2);
		&:has(input:nth-of-type(1):checked) {
			> label:nth-of-type(1) {
				color: #fc0;
			}
			> div {
				padding-left: 0px;
				padding-right: 12px;
				background-color: rgba(255,255,255,0.3);
			}
		}
		&:has(input:nth-of-type(2):checked) {
			> label:nth-of-type(2) {
				color: #fd0;
			}
			> div {
				padding-left: 12px;
				padding-right: 0px;
				background-color: #fc0;
			}
		}
		> input {
			display: none;
		}
		> label {
			font-size: 0.8rem;
			color: #fff;
			cursor: pointer;
			transition: color 0.3s;
			&:nth-of-type(1) {
				padding: 5px 5px 5px 10px;
			}
			&:nth-of-type(2) {
				padding: 5px 10px 5px 5px;
			}
		}
		> div {
			transition: padding 0.3s, background-color 0.3s;
			font-size: 0.8rem;
			line-height: 0.8rem;
			height: 0.8rem;
			color: #fff;
			border-radius: 100px;
		}
	}
}
/* range	*/
section {
	input[type="range"].ui {
		user-select: none;
		accent-color: var(--color-back3);
		cursor: pointer;
	}
}
/* <a href="">	*/
section {
	a.ui {
		user-select: none;
		appearance: none;
		display: inline-flex;
		align-items: center;
		box-sizing: border-box;
		height: 32px;
		padding: 9px 18px;
		font-size: 0.9rem;
		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 {
	.fileSelect {
		border-image-source: url(../image/stitch_beige_inside.svg);
		border-image-slice: 30;
		border-image-width: 30px;
		border-image-repeat: round;
		padding: 11px 13px;

		user-select: none;
		position: relative;
		overflow: hidden;
		background-color: rgba(240,200,150,0.3);
		padding: 50px 15px 15px 15px;
		text-align: center;
		min-width: 200px;
		cursor: pointer;
		transition: 0.2s;
		&:hover {
			opacity: 0.7;
		}
		> p {
			font-size: 0.9rem;
			color: #7b6246;
			line-height: 1.2;
		}
		input[type="file"] {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			cursor: pointer;
			opacity: 0;
		}
		> div {
			margin-top: 40px;
			font-size: 0.9rem;
			line-height: 1.2;
			color: #7b6246;
			padding: 5px;
			font-weight: 400;
			padding: 5px;
			min-height: 60px;
			border-image-source: url(../image/stitch_beige_inside.svg);
			border-image-slice: 30;
			border-image-width: 30px;
			border-image-repeat: round;	
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}