.post-content .kochi-related-links {
	--kochi-related-link-background-color: #fff;
	--kochi-related-link-title-color: #000;
	--kochi-related-link-title-hover-color: #004ea2;
}

[data-theme='blue-theme'] .post-content .kochi-related-links,
.post-content [data-theme='blue-theme'] .kochi-related-links {
	--kochi-related-link-background-color: #e1efff;
	--kochi-related-link-title-color: #004ea2;
	--kochi-related-link-title-hover-color: #004ea2;
}

[data-theme='black-theme'] .post-content .kochi-related-links,
.post-content [data-theme='black-theme'] .kochi-related-links {
	--kochi-related-link-background-color: #f8f8f8;
	--kochi-related-link-title-color: #004ea2;
	--kochi-related-link-title-hover-color: #004ea2;
}

.post-content .kochi-related-links {
	padding-block: 16px;
}

.post-content .kochi-related-links > ul {
	padding-block: 0;
	display: grid;
	row-gap: 8px;
}

.post-content .kochi-related-links > ul > li {
	padding-block: 0;
	padding-inline-start: 0;
	display: grid;
}

.post-content .kochi-related-links > ul > li::before {
	display: none;
}

.post-content .kochi-related-links > ul > li > a {
	padding-block: 16px;
	padding-inline: 16px;
	display: grid;
	grid-template-columns: 1fr 18px;
	-moz-column-gap: 16px;
	column-gap: 16px;
	color: var(--kochi-related-link-title-color);
	background-color: var(--kochi-related-link-background-color);
	font-size: var(--font-size-small);
	font-weight: 700;
	text-decoration: none;
	transition: color 300ms ease-out;
}

.post-content .kochi-related-links > ul > li > a span {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.post-content .kochi-related-links > ul > li > a::after {
	content: '';
	background-color: var(--kochi-related-link-title-hover-color);
	-webkit-mask-image: url(../images/icon/arrow-right.svg);
	mask-image: url(../images/icon/arrow-right.svg);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 18px 18px;
	mask-size: 18px 18px;
	width: 18px;
	height: 18px;
	transition: left 300ms ease-out;
	position: relative;
	left: 0;
	z-index: 1;
}

.post-content .kochi-related-links > ul > li:hover > a,
.post-content .kochi-related-links > ul > li:active > a,
.post-content .kochi-related-links > ul > li:focus-visible > a {
	color: var(--kochi-related-link-title-hover-color);
}

.post-content .kochi-related-links > ul > li:hover > a::after,
.post-content .kochi-related-links > ul > li:active > a::after,
.post-content .kochi-related-links > ul > li:focus-visible > a::after {
	left: 8px;
}