@use "@styles/color";
@use "@styles/var";

/* The bookmark rail.
 *
 * One tab per entry, in writing order, sliding out from behind the right edge
 * of the book. The negative margin is what sells it: the tabs start underneath
 * the page block and only their labelled ends stick out, the way a stack of
 * sticky tabs would. */
.rail {
	display: flex;
	flex-direction: column;
	min-height: 0;
	//The tabs scroll within the rail; the rail never grows the page
	height: 100%;
	width: var.$tab-width;
	margin-left: 0;
	padding: 0.35rem 0;
	position: relative;
	z-index: 4;
}

/* The tabs say what they are; a heading would only overflow the narrow rail
 * and print itself across the edge of the book. Kept for screen readers. */
.rail__title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.rail__list {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: none;
	display: flex;
	flex-direction: column;
	//The window is small and centred on where the reading is, so the current
	//tab sits at eye level rather than wherever a full list would put it.
	justify-content: center;
	gap: 0.3rem;
	padding: 0.15rem 0;

	&::-webkit-scrollbar {
		width: 0;
	}
}

/* A tab.
 *
 * Only its bound edge is tucked under the page block - the rest stands clear,
 * because a bookmark whose date you cannot read until you hover it is not a
 * bookmark. Hovering slides it further out to bring the preview into the light.
 */
.rail__tab {
	flex: 0 0 auto;
	position: relative;
	display: block;
	width: 100%;
	min-height: var.$tab-height;
	margin-left: calc(-1 * var.$tab-tuck);
	padding: 0.4rem 0.65rem 0.45rem calc(var.$tab-tuck + 0.55rem);
	text-align: left;

	color: color.$ink-soft;
	background-color: color.$paper-shade;
	//The shadowed strip that reads as the part still inside the book
	background-image:
		linear-gradient(to right, rgba(90, 68, 40, 0.22), rgba(90, 68, 40, 0.04) var.$tab-tuck, transparent calc(var.$tab-tuck + 0.5rem)),
		//The dye, washing in from the outer edge
		linear-gradient(to right, transparent 30%, var(--tab-wash, transparent) 100%);

	//`--tab` is set per tab from the day the entry was written, so a day's
	//entries share a colour and the rail reads as a run of days rather than a
	//list of rows. The card is still paper - only its edge is properly dyed.
	border-right: 0.45rem solid var(--tab, #{color.$paper-deep});
	border-radius: 0 var.$block-radius var.$block-radius 0;
	box-shadow: 0.12rem 0.15rem 0.5rem rgba(90, 54, 31, 0.22);

	transition: transform var.$trans-mid ease-out, background-color var.$trans-quick, color var.$trans-quick;

	&:hover,
	&:focus-visible {
		transform: translateX(0.45rem);
		background-color: color.$paper;
		color: color.$ink;
	}
}

/* The entry the book is currently showing */
.rail__tab--current {
	transform: translateX(0.3rem);
	background-color: color.$paper;
	color: color.$ink;
	box-shadow: 0.12rem 0.15rem 0.5rem rgba(90, 54, 31, 0.3);
	//The one being read is pulled clear of the others, and its paper is clean -
	//the dye stays on the edge so the preview text is easiest to read here
	background-image:
		linear-gradient(to right, rgba(90, 68, 40, 0.22), rgba(90, 68, 40, 0.04) var.$tab-tuck, transparent calc(var.$tab-tuck + 0.5rem));

	&:hover,
	&:focus-visible {
		transform: translateX(0.65rem);
	}
}

/* The entry still being written */
.rail__tab--open {
	box-shadow: 0.12rem 0.15rem 0.5rem rgba(90, 54, 31, 0.26), inset -0.2rem 0 0 color.$ribbon;
}

.rail__tab--current.rail__tab--open {
	box-shadow: 0.12rem 0.15rem 0.6rem rgba(90, 54, 31, 0.3), inset -0.2rem 0 0 color.$ribbon;
}

.rail__date {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	font-family: var.$font-hand;
	line-height: 1.15;
	white-space: nowrap;
}

.rail__day {
	font-size: 1.2rem;
	font-weight: 600;
	color: inherit;
}

.rail__time {
	font-size: 1rem;
	color: color.$ink-faint;
}

/* Only visible once the tab has slid out */
.rail__preview {
	display: block;
	margin-top: 0.05rem;
	font-size: 0.72rem;
	line-height: 1.25;
	color: color.$ink-faint;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

.rail__empty {
	font-family: var.$font-hand;
	font-size: 1.05rem;
	color: color.$ink-faint;
	padding: 0.5rem 0.75rem;
	writing-mode: vertical-rl;
	white-space: nowrap;
}

/* The page nobody has written on yet.
 *
 * Shaped like a tab, because that is what it becomes the moment something is
 * written on it - but a short one, drawn in outline: there is no date to stamp
 * on it and no day for it to take a dye from. It stands in the stack directly
 * after the last tab, which is where its own tab will be.
 */
.rail__new {
	flex: 0 0 auto;
	align-self: flex-start;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.75rem;
	min-height: 1.9rem;
	//The list's own gap sets it off from the last tab
	margin-left: calc(-1 * var.$tab-tuck);
	padding-left: var.$tab-tuck;

	color: color.$ink-faint;
	background-color: rgba(251, 241, 220, 0.5);
	//No left edge: like a tab, it comes out from under the page block
	border: 1px dashed color.$paper-deep;
	border-left: 0;
	border-radius: 0 var.$block-radius var.$block-radius 0;

	transition: transform var.$trans-mid ease-out, background-color var.$trans-quick, color var.$trans-quick;

	&:hover,
	&:focus-visible {
		transform: translateX(0.45rem);
		background-color: color.$paper;
		color: color.$ink-soft;
	}
}

/* The book is open at that page, so the + is doing a bookmark's job - and wears
 * the same ribbon the tab of the page being written on would. */
.rail__new--current {
	transform: translateX(0.3rem);
	color: color.$ink-soft;
	background-color: color.$paper;
	border-style: solid;
	border-color: color.$paper-edge;
	box-shadow: 0.12rem 0.15rem 0.5rem rgba(90, 54, 31, 0.22), inset -0.2rem 0 0 color.$ribbon;

	&:hover,
	&:focus-visible {
		transform: translateX(0.65rem);
	}
}

/* The rail shows a few tabs either side of where the reading is. These two
 * say the book carries on past them, and walk the window along. */
.rail__more {
	flex: 0 0 auto;
	align-self: flex-start;
	margin-left: 0;
	padding: 0.3rem 0.4rem;
	font-size: 0.7rem;
	color: color.$ink-soft;
	border-radius: var.$block-radius;

	&:hover {
		color: color.$ink;
		background-color: rgba(254, 244, 225, 0.6);
	}
}