.reader-list-gap {
	border-bottom: 1px solid var(--color-neutral-10);
	cursor: pointer;
	margin-bottom: 16px;
	padding: 30px 0;
	position: relative;
	text-align: center;

	@include breakpoint-deprecated( "<660px" ) {
		margin: 0 15px;
	}

	&.is-selected {
		box-shadow:
			0 0 0 1px var(--color-neutral-light),
			0 2px 4px var(--color-neutral-10);
	}

	&::before,
	&::after {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		right: 0;
	}

	&::before {
		background: linear-gradient(-135deg, var(--color-neutral-0) 8px, color-mix(in srgb, var(--color-neutral-0) 0%, transparent) 0) 0 8px, linear-gradient(135deg, var(--color-neutral-0) 8px, color-mix(in srgb, var(--color-neutral-0) 0%, transparent) 0) 0 8px;
		background-position: top left;
		background-repeat: repeat-x;
		background-size: 16px 16px;
		height: 16px;
		top: 46%;
	}

	&::after {
		background: linear-gradient(-135deg, var(--color-surface) 8px, color-mix(in srgb, var(--color-surface) 0%, transparent) 0) 0 8px, linear-gradient(135deg, var(--color-surface) 8px, color-mix(in srgb, var(--color-surface) 0%, transparent) 0) 0 8px;
		background-position: top left;
		background-repeat: repeat-x;
		background-size: 16px 16px;
		height: 16px;
		top: 44%;
	}
}

.reader-list-gap__button {
	border: none;
	background: var(--color-neutral-light);
	color: var(--color-text-inverted);
	position: relative;
	z-index: z-index("root", ".reader-list-gap__button");

	&:hover {
		color: color-mix(in srgb, var(--color-surface) 80%, transparent);
	}
}
