@import "../../../scss/mixin/media";

.ark-block-timeline {

	// アイコン利用 & 強調エフェクトでシェイプが大きくなってもいいように
	padding-left: 12px;

	--arkb-body-padding--left: 32px;
	--arkb-shape-size: 16px;
}

.ark-block-timeline__item {
	position: relative;
	margin: 0;
	padding: .5rem 0 2rem var(--arkb-body-padding--left);

	&::before {
		position: absolute;
		top: 0;
		// left: 7px;
		left: calc((var(--arkb-shape-size) / 2) - 1px);
		display: block;
		height: calc(100%);
		border-left: 2px solid var(--ark-color--border, rgba(200, 200, 200, .5));
		content: "";
	}
}

.ark-block-timeline__head {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	line-height: 1.5;
	// margin-left: -32px;
}

.ark-block-timeline__shape {
	position: absolute;
	// top: 0;
	left: calc(0px - var(--arkb-body-padding--left));
	display: block;
	// flex-shrink: 0;
	width: var(--arkb-shape-size);
	height: var(--arkb-shape-size);
	color: var(--ark-color--main, inherit);
	background-color: #fff;
	border: solid 2px currentColor;
	border-radius: 50%;

	&.-is-fill {
		background-color: currentColor;
	}

	&.-is-emphasis::before {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		display: block;
		width: 100%;
		height: 100%;
		border-radius: inherit;
		box-shadow: 0 0 0 6px currentColor;
		opacity: .2;
		content: "";
	}

	&.-has-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: calc(var(--arkb-shape-size) + 12px);
		height: calc(var(--arkb-shape-size) + 12px);
		margin-left: -6px;
	}
}

.ark-block-timeline__icon {
	width: 1em;
	height: 1em;
	color: inherit;
	font-size: 16px;
	line-height: 1;

	.-is-fill > & {
		color: #fff;
	}
}

.ark-block-timeline__label {
	font-size: .85em;
	opacity: .8;
}

.ark-block-timeline__title {
	margin-top: .5rem;
	font-weight: bold;
	// font-size: 1.05em;

	&:empty {
		display: none;
	}
}

.ark-block-timeline__body {
	margin-top: 1rem;
	font-size: .95em;

	&:empty {
		display: none;
	}
}