/*
 * PureCSS.com
 * https://purecss.com/examples/scroll-shelf/
 * A horizontally scrollable content shelf with scroll-snap for clean stopping points.
 */

.demo-scroll-shelf .shelf-wrap {
		position: relative;
	}

.demo-scroll-shelf .shelf {
		display: flex;
		gap: .75rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		padding-bottom: .5rem;
		-webkit-overflow-scrolling: touch;
	}

:is(.demo-scroll-shelf .shelf)::-webkit-scrollbar {
			height: 4px;
		}

:is(.demo-scroll-shelf .shelf)::-webkit-scrollbar-track {
			background: var(--surface-2);
			border-radius: 2px;
		}

:is(.demo-scroll-shelf .shelf)::-webkit-scrollbar-thumb {
			background: var(--border);
			border-radius: 2px;
		}

:is(:is(.demo-scroll-shelf .shelf)::-webkit-scrollbar-thumb):hover {
				background: var(--text-muted);
			}

.demo-scroll-shelf .shelf-item {
		flex: 0 0 160px;
		scroll-snap-align: start;
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: var(--radius-lg);
		overflow: hidden;
		transition: border-color .2s;
	}

:is(.demo-scroll-shelf .shelf-item):hover {
			border-color: var(--accent);
		}

:is(.demo-scroll-shelf .shelf-item):nth-child(1) .shelf-thumb { background: linear-gradient(135deg, var(--violet), var(--sky)); }

:is(.demo-scroll-shelf .shelf-item):nth-child(2) .shelf-thumb { background: linear-gradient(135deg, var(--accent), var(--teal)); }

:is(.demo-scroll-shelf .shelf-item):nth-child(3) .shelf-thumb { background: linear-gradient(135deg, var(--coral), var(--orange)); }

:is(.demo-scroll-shelf .shelf-item):nth-child(4) .shelf-thumb { background: linear-gradient(135deg, var(--rose), var(--violet)); }

:is(.demo-scroll-shelf .shelf-item):nth-child(5) .shelf-thumb { background: linear-gradient(135deg, var(--sky), var(--teal)); }

:is(.demo-scroll-shelf .shelf-item):nth-child(6) .shelf-thumb { background: linear-gradient(135deg, var(--orange), var(--yellow)); }

:is(.demo-scroll-shelf .shelf-item):nth-child(7) .shelf-thumb { background: linear-gradient(135deg, var(--teal), var(--accent)); }

.demo-scroll-shelf .shelf-thumb {
		height: 90px;
		background-size: cover;
		background-position: center;
	}

.demo-scroll-shelf .shelf-body {
		padding: .6rem .75rem;
	}

.demo-scroll-shelf .shelf-title {
		font-size: .85rem;
		font-weight: 600;
		margin-bottom: .15rem;
	}

.demo-scroll-shelf .shelf-sub {
		font-size: .75rem;
		color: var(--text-muted);
	}

.demo-scroll-shelf .shelf-hint {
		text-align: center;
		font-size: .75rem;
		color: var(--text-muted);
		margin-top: .5rem;
	}