// @import "../../../scss/mixin/media";
.ark-block-accordion {

	.ark-block-accordion__btn {
		display: block;
		width: 100%;
		background: none;
	}
}

.ark-block-accordion__item {

	& + & {
		margin-top: 1rem;
	}
}

.ark-block-accordion__title {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .75em 1em;
	background: var(--ark-color--gray, #f7f7f7);
	cursor: pointer;

	/* Safariで表示されるデフォルトの三角形アイコンを消します */
	&::-webkit-details-marker {
		display: none;
	}
}


.ark-block-accordion__label {
	flex: 1 1 auto;
	padding-right: 1em;
	word-break: break-all;
}

.ark-block-accordion__body {
	position: relative;
	height: auto;
	padding: 1em;
	overflow: hidden;
	opacity: 1;
	transition: padding .25s, height .25s, opacity .25s, visibility .25s;

	.ark-block-accordion__item:not(.is-opened) > & {
		height: 0;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		visibility: hidden;
		opacity: 0;
	}
}


// アコーディオンブロックのネスト時、別のアイコンタイプにすると表示が崩れるがそこまでは考慮しない。
.ark-block-accordion__icon {
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	text-align: center;
	transition: transform .25s;

	.__closed,
	.__opened {
		display: none;
	}

	/* stylelint-disable function-url-quotes */
	[data-icon-type="caret"] & {
		background-color: currentColor;
		mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><polygon points="14.6,3.5 8,10.2 1.4,3.5 0.2,4.7 6.9,11.3 8,12.5 9.1,11.3 15.8,4.7 "/></svg>') no-repeat center center / contain;
	}

	[data-icon-type="triangle"] & {
		background-color: currentColor;
		clip-path: polygon(50% 80%, 0 15%, 100% 15%);
	}

	&::before,
	&::after {
		position: absolute;
		margin: auto;
		background-color: currentColor;
		inset: 0;
	}

	[data-icon-type="plus"] & {
		position: relative;

		&::before {
			width: 100%;
			height: 2px;
			content: "";
		}

		&::after {
			width: 2px;
			height: 100%;
			transition: opacity .25s;
			content: "";
		}
	}

}

// 開いた時
.is-opened > .ark-block-accordion__title .ark-block-accordion__icon {
	transform: rotate(180deg);

	// [data-icon-type="plus"] > .is-opened でちゃんと指定したいがCSS長くなるのでdata指定なしでいく
	&::after {
		opacity: 0;
	}
}


.ark-block-accordion.is-style-box {

	.ark-block-accordion__item {
		border: 1px solid var(--ark-color--border, rgba(200, 200, 200, .5));
	}

	// .ark-block-accordion__item + .ark-block-accordion__item {
	// 	margin-top: -1px;
	// }

	.ark-block-accordion__title {
		background: none;
	}

	.ark-block-accordion__body {
		// background: var(--ark-color--gray, #f7f7f7);
		border-top: 1px dashed var(--ark-color--border, rgba(200, 200, 200, .5));
	}

}


/* stylelint-disable no-duplicate-selectors */
// --- 後方互換 for ~2.17.0 ---
.ark-block-accordion__body[aria-hidden="true"] {
	visibility: hidden;
}


// 開いた時
// [aria-expanded="true"] .ark-block-accordion__icon {
// 	transform: rotate(180deg);

// 	&::after {
// 		opacity: 0;
// 	}
// }