@use "sass:math";
@use "global/acms-common" as acms;
@use "global/common" as global;

/* ------------------------------
　　サマリー
------------------------------ */
.summary-default {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	border-top: 1px solid global.$base-color;
	border-left: 1px solid global.$base-color;

	@include acms.clearfix;

	// スライダー
	&.slick-initialized {
		margin-right: -10px;
		margin-left: -10px;
		overflow: hidden;
		border: 0;
	}

	.slick-list {
		padding: 0 0 0 20px;
		overflow: inherit;
	}

	.slick-dots {
		margin: 0;

		button {
			background: global.$base-color;
		}

		.slick-active button {
			background: global.$primary-color;
		}
	}
}

.summary-default-item {
	display: block;
	box-sizing: border-box;
	padding: 0 math.div(acms.$grid-space, 2);
	color: #333;
	border-right: 1px solid global.$base-color;
	border-bottom: 1px solid global.$base-color;

	@include acms.transition(background-color .25s ease-out);

	.acms-entry  & {
		padding: math.div(acms.$grid-space, 2);
	}

	// スライダー発動時
	.slick-initialized & {
		width: 280px;
		margin: 2px 10px 2px 2px;
		border: 0;
		box-shadow: 1px 1px 1px 1px rgb(0 0 0 / 8%), -1px -1px 1px 1px rgb(0 0 0 / 8%);
	}
}

.summary-default-link {
	display: block;
	margin:  0 math.div(acms.$grid-space, -2);
	padding: 10px;
	color: #333;
	transition: background .2s;

	&:hover,
	&:visited,
	&:active,
	&:focus {
		color: #333;
	}

	&:hover {
		text-decoration: none;
		background: #F1F1F1;
	}
}

.summary-title {
	margin: 0 0 10px;

	@include acms.font-size(16);

	font-weight: bold;
}

.summary-detail {
	margin: 0;
	line-height: 1.5;

	@include acms.font-size(13);
}

@media screen and (min-width: acms.$breakpoint-sm-min){
	.summary-default {
		margin: 0 0 20px;
	}
}
