/*////////////////////////////////////////////////////////////////////////////*/

/*! button.css */

/*////////////////////////////////////////////////////////////////////////////*/


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

	変数

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


/*	変数
------------------------------------------------------------------------------*/
/*
	・ボタンは、ボタンらしいスタイル .btn と、テキストリンク型 .link の2つ
	・ボタンの色はキーカラー変数で設定する --btn-color-rgb
	・ボーダーを使ったスタイルのボタンの場合は、 .btn-border-style を与える（通常のスタイルにクラス名を与えるなら .fill_style となる）
	・ボタンに .inline クラスを与えることでインライン化できる
	・ボタンの装飾として、.rounded と .shadow のオプションがある
*/

:root {
	--btn-font-family: inherit;
	--btn-font-weight: bold;
	--btn-font-feature_settings: 'palt';
	/**/
	--btn-text-align: center;
	/**/
	--btn-line-height: 1.5;
	--btn-line-height-gap: max(calc((var(--btn-line-height) - 1) / 2 * var(--font-size, 1em)), 0px);
	/**/
	--btn-padding-x: var(--btn-font-size, var(--font-size, 1em));
	--btn-padding-y: max(calc(var(--btn-padding-x) - var(--btn-line-height-gap)), 0px);
	/**/
	--btn-border-width: 1px;
	--btn-border-radius: max(calc(var(--btn-font-size, var(--font-size, 1em)) / 4), 0px);
	/**/
	--btn-icon-gap: var(--btn-font-size, var(--font-size, 1em));
	--btn-icon-size: var(--btn-font-size, var(--font-size, 1em));
	/**/
	--btn-color-rgb: var(--color-text-link-rgb, 0 0 225);
	/**/
	--btn-text-color-rgb: var(--color-bg-body-rgb, 255 255 255);/* 通常はフィルスタイルなので背景色抜き */
	--btn-text-color-a: 1;
	--btn-icon-color-rgb: var(--btn-text-color-rgb);/* 通常はラベルと同色 */
	--btn-icon-color-a: 1;
	/**/
	--btn-bg-color-rgb: var(--btn-color-rgb);
	--btn-bg-color-a: 1;
	--btn-border-color-rgb: var(--btn-color-rgb);
	--btn-border-color-a: .5;
	/**/
	--btn-hover-filter: brightness(125%);
}

/**/

.btn {
	--btn-bg-color-rgb: var(--btn-color-rgb);
	--btn-border-color-rgb: var(--btn-color-rgb);
	--btn-text-color-rgb: var(--color-bg-body-rgb, 255 255 255);
	--btn-icon-color-rgb: var(--btn-text-color-rgb);
	/**/
	--btn-bg-color-inverted-rgb: var(--color-bg-body-rgb, 255 255 255);
	--btn-border-color-inverted-rgb: var(--btn-bg-color-inverted-rgb);
	--btn-text-color-inverted-rgb: var(--btn-color-rgb);
	--btn-icon-color-inverted-rgb: var(--btn-text-color-inverted-rgb);
}

/**/

.link {
	--btn-text-color-rgb: var(--color-text-link-rgb);
	--btn-icon-color-rgb: var(--btn-text-color-rgb);
	/**/
	--btn-bg-color-a: 0;
	--btn-border-color-a: 0;
	/**/
	--btn-padding-x: 0px;
	--btn-padding-y: 0px;
	--btn-border-width: 0px;
	--btn-border-radius: 0px;
}


/*	ボタンコンテナ
------------------------------------------------------------------------------*/

.btn,
.link {
	line-height: var(--btn-line-height);
	font-family: var(--btn-font-family);
	font-weight: var(--btn-font-weight);
	font-feature-settings: var(--btn-font-feature_settings);
	font-size: var(--btn-font-size, var(--font-size));
}

.link {
	--btn-font-weight: normal;
}

.posts-box + .btn,
.posts-box + .btn-group {
	margin-top: calc(var(--btn-line-height) * 1em);
}


/*	アンカー
------------------------------------------------------------------------------*/

.btn,
.link {
	margin: 0;
	padding: 0;
	background: rgb(var(--btn-bg-color-rgb) / var(--btn-bg-color-a));
	border: var(--btn-border-width) solid rgb(var(--btn-border-color-rgb) / var(--btn-border-color-a));
	border-radius: var(--btn-border-radius);
	text-decoration: none;
	color: rgb(var(--btn-text-color-rgb) / var(--btn-text-color-a));
	fill: rgb(var(--btn-icon-color-rgb) / 1);
	/**/
	transition: background-color .2s ease-out,
	            border-color .2s ease-out,
	            opacity .2s ease-out,
	            filter .2s ease-out;
}

.btn {
	display: flex;
	align-items: center;
	/**/
	padding: var(--btn-padding-y) var(--btn-padding-x);
}

.btn.inline {
	display: inline-flex;
}

.link {
	display: inline-flex;
	align-items: flex-start;
}


/*	ラベル
------------------------------------------------------------------------------*/

.btn-label,
.link-label {
	order: 2;
}

.btn-label {
	flex-grow: 1;
	text-align: var(--btn-text-align);
}

.btn-label-nowrap .btn-label {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}


/*	角丸ボタン
------------------------------------------------------------------------------*/

.btn.btn-rounded {
	--btn-border-radius: calc(1px / 0);
}


/*	アイコン
------------------------------------------------------------------------------*/

.btn-icon,
.link-icon {
	order: 3;
	flex: none;
	/**/
	margin-left: var(--btn-icon-gap);
}

.btn-icon-left .btn-icon,
.link-icon-left .link-icon {
	order: 1;
	/**/
	margin-left: 0;
	margin-right: var(--btn-icon-gap);
}

.link-icon-left .link-icon {
	--btn-icon-gap: .25em;
}

.btn:not(.btn-no-icon)::after {
	content: '';
	order: 1;
	/**/
	margin-left: 0;
	margin-right: var(--btn-icon-gap);
}

.btn.btn-icon-left::after {
	order: 3;
	/**/
	margin-left: var(--btn-icon-gap);
	margin-right: 0;
}

/**/

.btn-icon > svg,
.btn-icon > img,
.link-icon > svg,
.link-icon > img {
	display: block;
	width: var(--btn-icon-size);
	height: var(--btn-icon-size);
	margin: 0;
	padding: 0;
}

.btn.inline .btn-icon > svg,
.btn.inline .btn-icon > img,
.link-icon > svg,
.link-icon > img {
	margin-top: var(--btn-line-height-gap);
}


/*	内部リンクアイコン
------------------------------------------------------------------------------*/

.btn.btn-link-internal::before {
	order: 3;
	flex: none;
	/**/
	content: '';
	width: .5em;
	height: .5em;
	border-right: var(--btn-border-width) solid rgb(var(--btn-icon-color-rgb) / var(--btn-icon-color-a));
	border-bottom: var(--btn-border-width) solid rgb(var(--btn-icon-color-rgb) / var(--btn-icon-color-a));
	transform: rotate(-45deg);
}

.btn.btn-icon-left.btn-link-internal::before {
	order: 1;
}


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

	装飾プリセット

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


/*	影
------------------------------------------------------------------------------*/

.btn.shadow {
	filter: drop-shadow(0 0 1px rgb(0 0 0 / .5))
	        drop-shadow(2px 2px 6px rgb(0 0 0 / .2));
}


/*	ボーダースタイル
------------------------------------------------------------------------------*/

.btn-border-style {
	--btn-bg-color-rgb: var(--color-bg-body-rgb, 255 255 255);
	--btn-bg-color-a: 0;
	--btn-border-color-rgb: var(--btn-color-rgb);
	--btn-text-color-rgb: var(--btn-color-rgb);
	/**/
	--btn-bg-color-inverted-rgb: var(--btn-color-rgb);
	--btn-border-color-inverted-rgb: var(--btn-bg-color-inverted-rgb);
	--btn-text-color-inverted-rgb: var(--color-bg-body-rgb, 255 255 255);
	--btn-icon-color-inverted-rgb: var(--btn-text-color-inverted-rgb);
}


/*	カラー
------------------------------------------------------------------------------*/

.btn-color-text {
	--btn-color-rgb: var(--color-text-p-rgb);
}

.btn-color-line {
	--btn-color-rgb: var(--color-line-rgb);
}


/*	カレント（選択状態）
------------------------------------------------------------------------------*/

.btn.current {
	cursor: default !important;
	font-weight: bold;
	opacity: .7;
}

.btn.current .btn-icon {
	visibility: hidden;
}


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

	HOVER

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

@media (any-hover: hover) {

	.btn:not(.current):hover {
		--btn-border-color-a: 1;
		--btn-text-color-a: 1;
		--btn-icon-color-a: 1;
		/**/
		cursor: pointer;
	}

	.btn:not(.current):not(.btn-border-style):hover {
		filter: var(--btn-hover-filter);
	}

	.btn:not(.current).btn-border-style:hover {
		--btn-bg-color-rgb: var(--btn-bg-color-inverted-rgb);
		--btn-border-color-rgb: var(--btn-border-color-inverted-rgb);
		--btn-text-color-rgb: var(--btn-text-color-inverted-rgb);
		--btn-icon-color-rgb: var(--btn-text-color-rgb);
		--btn-bg-color-a: 1;
	}

	.link:not(.btn):hover .btn-label {
		text-underline-offset: .2em;
		text-decoration: underline;
	}

/**/}
@media (any-hover: none) {

	.btn:not(.current):active {
		--btn-border-color-a: 1;
		--btn-text-color-a: 1;
		--btn-icon-color-a: 1;
	}

	.btn:not(.current):not(.btn-border-style):active {
		filter: var(--btn-active-filter);
	}

	.btn:not(.current).btn-border-style:active {
		--btn-bg-color-rgb: var(--btn-bg-color-inverted-rgb);
		--btn-border-color-rgb: var(--btn-border-color-inverted-rgb);
		--btn-text-color-rgb: var(--btn-text-color-inverted-rgb);
		--btn-icon-color-rgb: var(--btn-text-color-rgb);
		--btn-bg-color-a: 1;
	}

	.link:not(.btn):active .btn-label {
		text-underline-offset: .2em;
		text-decoration: underline;
	}

/**/}


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

	ボタンボックス

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


/*	親コンテナ　※段組みの指定は .grid-layout を使ってください
------------------------------------------------------------------------------*/

.btn-group {
	list-style: none;
	position: relative;
	width: 100%;
	margin: var(--margin-line) auto;
	padding: 0;
}

.btn-group:not(.grid-layout) {
	display: flex;
}

.btn-group .btn {
	width: 100%;
	margin: 0 !important;
}