/* =========================================================
 * possweb/icon-button — アイコンボタンブロック
 * ボタン前後にアイコン画像を設定可能
 * ========================================================= */

.possweb-icon-button-block {
	box-sizing: border-box;
}

/* 編集画面でレイアウト変更時もブロックが中央幅を保つよう幅を確保（左寄りになる不具合対策） */
.possweb-icon-button-block--edit {
	width: 100%;
}
.possweb-icon-button-block--edit .possweb-icon-button__wrapper {
	min-width: 100%;
}

.possweb-icon-button__wrapper {
	box-sizing: border-box;
}

/* ボタン全体のリンク（ボタン領域いっぱいにクリック可能にする） */
.possweb-icon-button__link {
	display: inline-flex;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}
/* マウスクリック時のフォーカス枠を非表示（キーボード操作時は :focus-visible で表示可能） */
.possweb-icon-button__link:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}
.possweb-icon-button__link .possweb-icon-button {
	cursor: pointer;
}

/* パディングは枠線の内側（ボタン本体）に適用 */
.possweb-icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35em;
	box-sizing: border-box;
	padding-top: var(--possweb-icon-button-padding-top, 0.5em);
	padding-right: var(--possweb-icon-button-padding-right, 1em);
	padding-bottom: var(--possweb-icon-button-padding-bottom, 0.5em);
	padding-left: var(--possweb-icon-button-padding-left, 1em);
	font-size: var(--possweb-icon-button-font-size, inherit);
	font-weight: var(--possweb-icon-button-font-weight, inherit);
	line-height: var(--possweb-icon-button-line-height, inherit);
	cursor: default;
}

.possweb-icon-button--icon-before .possweb-icon-button__icon {
	order: -1;
}

.possweb-icon-button--icon-after .possweb-icon-button__icon {
	order: 1;
}

.possweb-icon-button__text {
	white-space: nowrap;
}

.possweb-icon-button__icon {
	flex-shrink: 0;
	width: var(--possweb-icon-button-icon-size, 24px);
	height: var(--possweb-icon-button-icon-size, 24px);
	min-width: var(--possweb-icon-button-icon-size, 24px);
	min-height: var(--possweb-icon-button-icon-size, 24px);
}

/* タブレット 1024px以下 */
@media ( max-width: 1024px ) {
	.possweb-icon-button-block .possweb-icon-button {
		padding-top: var(--possweb-icon-button-padding-top-tablet, var(--possweb-icon-button-padding-top, 0.5em));
		padding-right: var(--possweb-icon-button-padding-right-tablet, var(--possweb-icon-button-padding-right, 1em));
		padding-bottom: var(--possweb-icon-button-padding-bottom-tablet, var(--possweb-icon-button-padding-bottom, 0.5em));
		padding-left: var(--possweb-icon-button-padding-left-tablet, var(--possweb-icon-button-padding-left, 1em));
		font-size: var(--possweb-icon-button-font-size-tablet, var(--possweb-icon-button-font-size, inherit));
		line-height: var(--possweb-icon-button-line-height-tablet, var(--possweb-icon-button-line-height, inherit));
	}
	.possweb-icon-button-block .possweb-icon-button__icon {
		width: var(--possweb-icon-button-icon-size-tablet, var(--possweb-icon-button-icon-size, 24px));
		height: var(--possweb-icon-button-icon-size-tablet, var(--possweb-icon-button-icon-size, 24px));
		min-width: var(--possweb-icon-button-icon-size-tablet, var(--possweb-icon-button-icon-size, 24px));
		min-height: var(--possweb-icon-button-icon-size-tablet, var(--possweb-icon-button-icon-size, 24px));
	}
}

/* モバイル 781px以下 */
@media ( max-width: 781px ) {
	.possweb-icon-button-block .possweb-icon-button {
		padding-top: var(--possweb-icon-button-padding-top-mobile, var(--possweb-icon-button-padding-top-tablet, var(--possweb-icon-button-padding-top, 0.5em)));
		padding-right: var(--possweb-icon-button-padding-right-mobile, var(--possweb-icon-button-padding-right-tablet, var(--possweb-icon-button-padding-right, 1em)));
		padding-bottom: var(--possweb-icon-button-padding-bottom-mobile, var(--possweb-icon-button-padding-bottom-tablet, var(--possweb-icon-button-padding-bottom, 0.5em)));
		padding-left: var(--possweb-icon-button-padding-left-mobile, var(--possweb-icon-button-padding-left-tablet, var(--possweb-icon-button-padding-left, 1em)));
		font-size: var(--possweb-icon-button-font-size-mobile, var(--possweb-icon-button-font-size-tablet, var(--possweb-icon-button-font-size, inherit)));
		line-height: var(--possweb-icon-button-line-height-mobile, var(--possweb-icon-button-line-height-tablet, var(--possweb-icon-button-line-height, inherit)));
	}
	.possweb-icon-button-block .possweb-icon-button__icon {
		width: var(--possweb-icon-button-icon-size-mobile, var(--possweb-icon-button-icon-size-tablet, var(--possweb-icon-button-icon-size, 24px)));
		height: var(--possweb-icon-button-icon-size-mobile, var(--possweb-icon-button-icon-size-tablet, var(--possweb-icon-button-icon-size, 24px)));
		min-width: var(--possweb-icon-button-icon-size-mobile, var(--possweb-icon-button-icon-size-tablet, var(--possweb-icon-button-icon-size, 24px)));
		min-height: var(--possweb-icon-button-icon-size-mobile, var(--possweb-icon-button-icon-size-tablet, var(--possweb-icon-button-icon-size, 24px)));
	}
}