@charset 'utf-8';

/* Forms
--------------------------------------------- */
input[type=text],
input[type=email],
input[type=url],
input[type=password],
input[type=search],
input[type=number],
input[type=tel],
input[type=date],
textarea {
	width: 100%;
	background: #fff;
	color: var(--input-color, var(--ap-color-text));
	border: 1px solid hsla(0, 0%, 87%, 1);
	padding: .5em;
}
input[type=submit],
input[type=button],
input[type=reset] {
	background: #f5f5f5;
	color: var(--input-color, var(--ap-color-text));
	border: 1px solid hsla(0, 0%, 87%, 1);
	padding: .5em .75em;
}

select {
	width: 100%;
	border: 1px solid hsla(0, 0%, 87%, 1);
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
	background-repeat: no-repeat;
	background-position: right .5em top 50%;
	background-size: 1em;
	background-color: #fff;
	color: var(--input-color, var(--ap-color-text));
	padding: 8px 32px 8px 12px;
}

button {
	&:where(:focus, :focus-visible) {
		outline: 1px dotted var(--ap-color-accent);
	}
}


// 検索
.search-form {
	--submit-icon-size: 2em;
	position: relative;
}

.search-form__field[type=text] {
	width: 100%;
	padding-inline-end: var(--submit-icon-size);
	text-align: start;
}

.search-form__submit {
	position: absolute;
	top: 0;
	inset-inline-end: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: var(--submit-icon-size);
	height: 100%;
	color: #646464;
	font-size: 1.25rem;
}


// wp block search
.wp-block-search__inside-wrapper {
	padding: 0;
}

.wp-block-search__input {
	flex: 1;
}

.wp-block-search__label {
	display: none;
}

.wp-block-search__button {
	box-shadow: 0 0 1px 0 hsla(0, 0%, 0%, .4);
	padding: .5em .75em;
	background: #f5f5f5;
	color: var(--input-color, var(--ap-color-text));
}

.wp-block-search__button-inside {
	position: relative;
	.wp-block-search__button {
		position: absolute;
		top: 0;
		right: 0;
		height: 100%;
		margin: 0;
		box-shadow: none;
		border: 1px solid hsla(0, 0%, 87%, 1);
		color: var(--input-color, var(--ap-color-text));
	}
}