@raster-app/react 0.0.0-stage → 0.1.0-canary-fd0f8dd

package/dist/styles.css

@@ -0,0 +1,1000 @@
+/*
+ * RasterPicker, drawn in Raster's design language: the values of raster/apps/web, by way of
+ * mngr.am's Raster picker, with Raster's 14px rem multiplied out to px. Everything is scoped
+ * under `.rs`. The picker follows the system's color scheme unless `theme` sets one.
+ */
+
+.rs {
+	color-scheme: light dark;
+	--rs-red: #ff2f66;
+	--rs-fg: light-dark(#27272a, #ffffff);
+	--rs-gray-400: #a1a1aa;
+	--rs-gray-500: #71717a;
+	--rs-bg: light-dark(#f4f4f5, #27272a);
+	--rs-line: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
+	--rs-line-strong: light-dark(rgba(0, 0, 0, 0.18), rgba(255, 255, 255, 0.18));
+	--rs-hr: light-dark(#e4e4e7, #3f3f46);
+	--rs-sidebar-bg: light-dark(rgba(228, 228, 231, 0.3), rgba(63, 63, 70, 0.3));
+	--rs-sidebar-edge-inner: light-dark(#fff, #000);
+	--rs-sidebar-edge-outer: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
+	--rs-item-hover: light-dark(rgba(0, 0, 0, 0.02), rgba(255, 255, 255, 0.02));
+	--rs-item-active: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.1));
+	--rs-count-bg: light-dark(#e4e4e7, #3f3f46);
+	--rs-input-bg: light-dark(#e4e4e7, #27272a);
+	--rs-button-secondary: light-dark(rgba(244, 244, 245, 0.4), rgba(255, 255, 255, 0.1));
+	--rs-wash: light-dark(#000, #fff);
+	--rs-ghost-hover: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.1));
+	--rs-thumb-bg: light-dark(#e4e4e7, #18181b);
+	--rs-thumb-gap: light-dark(#fff, #000);
+	--rs-thumb-ring: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
+	--rs-thumb-ring-hover: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
+	--rs-thumb-meta: light-dark(rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.2));
+	--rs-scroll-thumb: light-dark(#a1a1aa, rgba(255, 255, 255, 0.2));
+	--rs-shadow:
+		inset 0 0 0 1px light-dark(#fff, rgba(255, 255, 255, 0.1)),
+		0 0 0 1px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.5)),
+		0 10px 35px 5px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.1)),
+		0 5px 20px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
+
+	background: var(--rs-bg);
+	color: var(--rs-fg);
+	font-family:
+		ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+		"Noto Color Emoji";
+	font-size: 14px;
+	line-height: 1.5;
+	text-align: left;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	user-select: none;
+}
+
+.rs[data-theme="light"] {
+	color-scheme: light;
+}
+
+.rs[data-theme="dark"] {
+	color-scheme: dark;
+}
+
+.rs *,
+.rs *::before,
+.rs *::after {
+	box-sizing: border-box;
+	font-family: inherit;
+}
+
+/* Raster's `a, button { cursor: default }`: the app is a tool, not a page. */
+.rs button,
+.rs a,
+.rs label {
+	cursor: default;
+}
+
+.rs h1,
+.rs h2,
+.rs p {
+	margin: 0;
+}
+
+.rs-visually-hidden {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	clip-path: inset(50%);
+	white-space: nowrap;
+}
+
+.rs-selectable {
+	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+	user-select: text;
+}
+
+/* ---- layout ---- */
+
+.rs-picker {
+	display: flex;
+	width: 100%;
+	height: 100%;
+	min-height: 360px;
+	overflow: hidden;
+}
+
+.rs-picker > .rs-sidebar {
+	width: 208px;
+	flex-shrink: 0;
+}
+
+.rs-main {
+	position: relative;
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	min-width: 0;
+}
+
+.rs-header {
+	display: flex;
+	flex-shrink: 0;
+	align-items: center;
+	gap: 10.5px;
+	padding: 10.5px 10.5px 0 16px;
+}
+
+/* The title and search give way first, so no button's label is cut. */
+.rs-header > .rs-button {
+	flex-shrink: 0;
+}
+
+.rs-content {
+	flex: 1;
+	min-height: 0;
+	padding: 16px;
+}
+
+.rs-content > * + * {
+	margin-top: 16px;
+}
+
+.rs-center {
+	display: flex;
+	flex: 1;
+	align-items: center;
+	justify-content: center;
+	padding: 16px;
+}
+
+.rs-row {
+	display: flex;
+	align-items: center;
+	gap: 7px;
+}
+
+.rs-scroll {
+	overflow-y: auto;
+}
+
+.rs-scroll::-webkit-scrollbar {
+	width: 12px;
+	height: 12px;
+}
+
+.rs-scroll::-webkit-scrollbar-thumb {
+	border: 5px solid transparent;
+	border-radius: 20px;
+	background: var(--rs-scroll-thumb);
+	background-clip: padding-box;
+}
+
+.rs-scroll::-webkit-scrollbar-thumb:hover {
+	background-color: var(--rs-red);
+}
+
+/* ---- surfaces and type ---- */
+
+.rs-window {
+	border-radius: 7px;
+	background: var(--rs-bg);
+	box-shadow: var(--rs-shadow);
+}
+
+.rs-card {
+	padding: 10.5px 14px;
+	border: 1px solid rgba(255, 47, 102, 0.2);
+	border-radius: 7px;
+	background: rgba(255, 47, 102, 0.1);
+	font-size: 12.25px;
+	line-height: 17.5px;
+	user-select: text;
+}
+
+.rs-hr {
+	margin: 3.5px 0 10.5px;
+	border: 0;
+	border-top: 1px solid var(--rs-hr);
+}
+
+.rs-brand {
+	display: flex;
+	align-items: center;
+	gap: 8.75px;
+	padding: 4px 7px;
+	font-weight: 500;
+}
+
+.rs-brand > svg {
+	color: var(--rs-red);
+}
+
+.rs-title {
+	font-size: 21px;
+	line-height: 28px;
+	font-weight: 700;
+	letter-spacing: -0.025em;
+}
+
+.rs-heading {
+	overflow: hidden;
+	font-size: 15.75px;
+	line-height: 22px;
+	font-weight: 500;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.rs-label {
+	display: block;
+	margin-bottom: 7px;
+	font-size: 10.5px;
+	line-height: 14px;
+	opacity: 0.85;
+}
+
+.rs-muted {
+	color: var(--rs-gray-500);
+}
+
+.rs-small {
+	font-size: 12.25px;
+	line-height: 17.5px;
+}
+
+/* ---- buttons ---- */
+
+.rs-button {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 7px;
+	overflow: hidden;
+	padding: 7px 28px;
+	border: 1px solid var(--rs-line);
+	border-radius: 5.25px;
+	background: transparent;
+	color: inherit;
+	font-size: 14px;
+	line-height: 21px;
+	font-weight: 500;
+	text-decoration: none;
+	white-space: nowrap;
+	transform: translateZ(0);
+	transition:
+		color 0.15s ease,
+		background-color 0.15s ease,
+		border-color 0.15s ease,
+		opacity 0.15s ease;
+}
+
+.rs-button::after {
+	content: "";
+	position: absolute;
+	inset: 0;
+	background: var(--rs-wash);
+	opacity: 0;
+	transform: translateY(40%);
+	transition:
+		transform 0.15s ease,
+		opacity 0.15s ease;
+}
+
+.rs-button:hover,
+.rs-button:focus-visible,
+.rs-button:has(:focus-visible) {
+	border-color: var(--rs-line-strong);
+	outline: none;
+}
+
+.rs-button:active::after {
+	opacity: 0.1;
+	transform: translateY(0);
+}
+
+.rs-button:disabled,
+.rs-button:has(:disabled) {
+	opacity: 0.5;
+	pointer-events: none;
+}
+
+.rs-button-primary {
+	border-color: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.18));
+	background: var(--rs-red);
+	color: #fff;
+	box-shadow: inset 0 0 10px -10px #ff5381;
+}
+
+.rs-button-primary:hover,
+.rs-button-primary:focus-visible {
+	border-color: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.3));
+}
+
+.rs-button-secondary {
+	background: var(--rs-button-secondary);
+}
+
+.rs-button-sm {
+	padding: 5.25px 14px;
+	font-size: 12.25px;
+	line-height: 17.5px;
+}
+
+.rs-icon-button {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	padding: 5.25px;
+	border: 0;
+	border-radius: 3.5px;
+	background: transparent;
+	color: var(--rs-gray-400);
+	transition:
+		color 0.15s ease,
+		background-color 0.15s ease;
+}
+
+.rs-icon-button:hover,
+.rs-icon-button:focus-visible {
+	outline: none;
+	background: var(--rs-ghost-hover);
+	color: var(--rs-fg);
+}
+
+/* ---- fields ---- */
+
+.rs-input {
+	width: 100%;
+	min-width: 0;
+	appearance: none;
+	padding: 4.5px 8.75px;
+	border: 1px solid var(--rs-line);
+	border-radius: 5.25px;
+	background: var(--rs-input-bg);
+	color: var(--rs-fg);
+	font-size: 12.25px;
+	line-height: 17.5px;
+	outline: none;
+	user-select: text;
+	transition:
+		border-color 0.15s ease,
+		background-color 0.15s ease;
+}
+
+.rs-input::placeholder {
+	color: var(--rs-gray-400);
+}
+
+.rs-input:hover {
+	border-color: var(--rs-line-strong);
+}
+
+.rs-input:focus {
+	border-color: var(--rs-red);
+}
+
+.rs-input:disabled {
+	opacity: 0.5;
+	pointer-events: none;
+}
+
+.rs-search {
+	position: relative;
+	display: flex;
+	align-items: center;
+	width: 100%;
+	max-width: 280px;
+	margin-left: auto;
+}
+
+.rs-search > svg {
+	position: absolute;
+	left: 8.75px;
+	color: var(--rs-gray-400);
+	pointer-events: none;
+}
+
+.rs-search > .rs-input {
+	padding-left: 26px;
+	padding-right: 26px;
+}
+
+.rs-search > .rs-icon-button {
+	position: absolute;
+	right: 3.5px;
+	padding: 3.5px;
+}
+
+/* ---- sidebar ---- */
+
+.rs-sidebar {
+	display: flex;
+	flex-direction: column;
+	gap: 1px;
+	padding: 10.5px 5.25px;
+	background: var(--rs-sidebar-bg);
+	box-shadow:
+		inset -1px 0 0 var(--rs-sidebar-edge-inner),
+		inset -2px 0 0 var(--rs-sidebar-edge-outer);
+}
+
+.rs-sidebar > .rs-brand {
+	margin-bottom: 7px;
+}
+
+.rs-sidebar > nav {
+	flex: 1;
+	min-height: 0;
+}
+
+.rs-sidebar-item {
+	display: flex;
+	width: 100%;
+	align-items: center;
+	gap: 8.75px;
+	padding: 4px 10.5px;
+	border: 0;
+	border-radius: 5.25px;
+	background: transparent;
+	color: inherit;
+	font-size: 13px;
+	line-height: 19px;
+	text-align: left;
+	transition: background-color 0.3s ease;
+}
+
+.rs-sidebar-item > svg {
+	color: var(--rs-gray-400);
+}
+
+.rs-sidebar-item:hover,
+.rs-sidebar-item:focus-visible,
+.rs-sidebar-item:has(:focus-visible) {
+	outline: none;
+	background-color: var(--rs-item-hover);
+}
+
+.rs-sidebar-item.is-active {
+	background-color: var(--rs-item-active);
+}
+
+.rs-sidebar-item:disabled,
+.rs-sidebar-item:has(:disabled) {
+	opacity: 0.3;
+	pointer-events: none;
+}
+
+.rs-sidebar-count {
+	flex-shrink: 0;
+	min-width: 1.5em;
+	margin-left: auto;
+	padding: 1.75px 7px;
+	border-radius: 3.5px;
+	background: var(--rs-count-bg);
+	font-size: 10.5px;
+	line-height: 14px;
+	text-align: center;
+	opacity: 0.5;
+}
+
+.rs-sidebar-count.is-active {
+	opacity: 1;
+}
+
+.rs-sidebar-heading {
+	margin: 10.5px 0 7px;
+	padding-left: 10.5px;
+	color: var(--rs-gray-500);
+	font-size: 10.5px;
+	line-height: 14px;
+	font-weight: 400;
+}
+
+.rs-sidebar-footer {
+	display: grid;
+	gap: 1px;
+	margin-top: auto;
+	padding-top: 7px;
+	border-top: 1px solid var(--rs-hr);
+}
+
+/* The organization switcher, and its menu in glass over the page. */
+.rs-org {
+	position: relative;
+	margin-bottom: 7px;
+}
+
+.rs-org-trigger {
+	padding: 5.25px 8.75px;
+	font-size: 14px;
+	font-weight: 500;
+}
+
+.rs-org-trigger > svg:last-child {
+	margin-left: auto;
+}
+
+.rs-avatar {
+	display: flex;
+	flex-shrink: 0;
+	align-items: center;
+	justify-content: center;
+	width: 17.5px;
+	height: 17.5px;
+	border-radius: 3.5px;
+	color: #fff;
+	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+	font-size: 10.5px;
+}
+
+.rs-menu {
+	position: absolute;
+	top: calc(100% + 4px);
+	left: 0;
+	z-index: 50;
+	display: flex;
+	flex-direction: column;
+	gap: 1px;
+	min-width: 266px;
+	max-width: 280px;
+	max-height: min(calc(100vh - 60px), 600px);
+	overflow-y: auto;
+	padding: 7px;
+	border-radius: 5.25px;
+	background: light-dark(rgba(255, 255, 255, 0.8), rgba(24, 24, 27, 0.7));
+	-webkit-backdrop-filter: blur(24px);
+	backdrop-filter: blur(24px);
+	box-shadow: var(--rs-shadow);
+}
+
+.rs-menu-heading {
+	padding: 3.5px 7px;
+	color: var(--rs-gray-500);
+	font-size: 10.5px;
+	line-height: 14px;
+}
+
+/* The library line, red while the library is open. */
+.rs-library {
+	position: relative;
+}
+
+.rs-library::after {
+	content: "";
+	position: absolute;
+	top: 2px;
+	bottom: 4px;
+	left: 4px;
+	width: 1px;
+	background: var(--rs-gray-500);
+	transition: background-color 460ms cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+.rs-library.is-expanded::after {
+	background: var(--rs-red);
+}
+
+.rs-library-row {
+	height: 30px;
+	margin-bottom: 2px;
+	padding-right: 5.25px;
+	font-weight: 500;
+}
+
+.rs-library.is-expanded .rs-library-row > svg {
+	color: var(--rs-red);
+}
+
+.rs-library-menu {
+	display: grid;
+	grid-template-rows: 0fr;
+	overflow: hidden;
+	padding-left: 10px;
+	transition: grid-template-rows 460ms cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+.rs-library-menu.is-expanded {
+	grid-template-rows: 1fr;
+}
+
+.rs-library-menu > div {
+	min-height: 0;
+	opacity: 0;
+	transition: opacity 460ms cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+.rs-library-menu.is-expanded > div {
+	opacity: 1;
+}
+
+.rs-library-menu > div::after {
+	content: "";
+	display: block;
+	height: 8px;
+}
+
+.rs-library-name {
+	flex: 1;
+	min-width: 0;
+	overflow: hidden;
+	white-space: nowrap;
+	mask-image: linear-gradient(90deg, #000 80%, transparent 95%);
+}
+
+/* ---- asset tiles ---- */
+
+.rs-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+	gap: 16px;
+}
+
+.rs-asset-thumb {
+	position: relative;
+	isolation: isolate;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	width: 100%;
+	height: 164px;
+	overflow: hidden;
+	padding: 0;
+	border: 0;
+	border-radius: 3.5px;
+	background: var(--rs-thumb-bg);
+	color: inherit;
+	text-align: left;
+	box-shadow:
+		0 0 0 1px var(--rs-thumb-gap),
+		0 0 0 2px var(--rs-thumb-ring);
+}
+
+.rs-asset-thumb:hover {
+	box-shadow:
+		0 0 0 1px var(--rs-thumb-gap),
+		0 0 0 2px var(--rs-thumb-ring-hover);
+}
+
+.rs-asset-thumb:focus-visible,
+.rs-asset-thumb:active,
+.rs-asset-thumb[aria-pressed="true"] {
+	outline: none;
+	box-shadow:
+		0 0 0 1px var(--rs-thumb-gap),
+		0 0 0 2px var(--rs-red);
+}
+
+.rs-asset-thumb:disabled {
+	opacity: 0.6;
+}
+
+.rs-thumb-blur {
+	position: absolute;
+	inset: -56px;
+	z-index: 10;
+	width: calc(100% + 112px);
+	height: calc(100% + 112px);
+	object-fit: cover;
+	filter: blur(40px);
+	opacity: 0.75;
+	transform: translateZ(0);
+}
+
+.rs-thumb-preview {
+	position: relative;
+	z-index: 20;
+	flex: 1 1 0;
+	min-height: 0;
+}
+
+.rs-thumb-preview > img {
+	position: absolute;
+	inset: 0;
+	width: 100%;
+	height: 100%;
+	object-fit: contain;
+	transition: opacity 200ms ease;
+}
+
+.rs-asset-thumb:not([data-loaded]) .rs-thumb-preview > img {
+	opacity: 0;
+}
+
+.rs-thumb-meta {
+	position: relative;
+	z-index: 10;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	flex-shrink: 0;
+	height: 44px;
+	padding: 7px 10.5px;
+	background: var(--rs-thumb-meta);
+	-webkit-backdrop-filter: blur(12px);
+	backdrop-filter: blur(12px);
+}
+
+.rs-thumb-title {
+	overflow: hidden;
+	font-size: 11.5px;
+	line-height: 16px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.rs-thumb-subtitle {
+	display: flex;
+	align-items: center;
+	overflow: hidden;
+	font-size: 9.5px;
+	line-height: 13px;
+	white-space: nowrap;
+	opacity: 0.7;
+}
+
+.rs-thumb-subtitle > span + span {
+	margin-left: 7px;
+	padding-left: 7px;
+	border-left: 1px solid var(--rs-line);
+}
+
+.rs-thumb-subtitle > .rs-spinner {
+	width: 11px;
+	height: 11px;
+	margin-right: 7px;
+}
+
+/* A tile's pills: a badge on the left, an action on the right that shows on hover. */
+.rs-tile {
+	position: relative;
+}
+
+.rs-pill {
+	position: absolute;
+	top: 7px;
+	z-index: 30;
+	display: inline-flex;
+	align-items: center;
+	gap: 3.5px;
+	padding: 1.75px 7px;
+	border: 0;
+	border-radius: 5.25px;
+	background: rgba(17, 24, 39, 0.7);
+	color: #fff;
+	font-size: 10.5px;
+	line-height: 14px;
+	white-space: nowrap;
+}
+
+.rs-tile-badge {
+	left: 7px;
+}
+
+.rs-tile-action {
+	right: 7px;
+	opacity: 0;
+	transition:
+		opacity 0.15s ease,
+		background-color 0.15s ease;
+}
+
+.rs-tile:hover .rs-tile-action,
+.rs-tile-action:focus-visible,
+.rs-tile-action.is-confirming {
+	opacity: 1;
+	outline: none;
+}
+
+.rs-tile-action:hover {
+	background: rgba(17, 24, 39, 0.9);
+}
+
+.rs-tile-action.is-confirming {
+	background: var(--rs-red);
+}
+
+.rs-tile-action:disabled {
+	opacity: 0.5;
+	pointer-events: none;
+}
+
+/* The transparency checkerboard, behind a format that carries alpha. */
+.rs-transparent {
+	position: absolute;
+	inset: 0 0 44px 0;
+	z-index: 10;
+	background-color: var(--rs-thumb-bg);
+}
+
+.rs-transparent::before {
+	content: "";
+	position: absolute;
+	inset: 0;
+	opacity: 0.2;
+	background-size: 20px 20px;
+	background-image:
+		linear-gradient(45deg, #808080 25%, transparent 25%, transparent 75%, #808080 75%, #808080),
+		linear-gradient(45deg, #808080 25%, transparent 25%, transparent 75%, #808080 75%, #808080);
+	background-position:
+		0 0,
+		10px 10px;
+}
+
+/* An opened asset: the image large, beside its facts and actions, which wrap below it when narrow. */
+.rs-detail {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 16px;
+}
+
+.rs-detail-image {
+	position: relative;
+	flex: 999 1 320px;
+	height: clamp(220px, 45vh, 440px);
+	overflow: hidden;
+	border-radius: 3.5px;
+	background: var(--rs-thumb-bg);
+	box-shadow:
+		0 0 0 1px var(--rs-thumb-gap),
+		0 0 0 2px var(--rs-thumb-ring);
+}
+
+.rs-detail-image > img {
+	position: absolute;
+	inset: 0;
+	width: 100%;
+	height: 100%;
+	object-fit: contain;
+}
+
+.rs-detail-info {
+	display: flex;
+	flex: 1 1 200px;
+	flex-direction: column;
+	gap: 10.5px;
+	min-width: 0;
+}
+
+.rs-detail-info > .rs-heading {
+	white-space: normal;
+	overflow-wrap: anywhere;
+}
+
+/* ---- states ---- */
+
+.rs-empty {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 5.25px;
+	min-height: 100%;
+	text-align: center;
+}
+
+.rs-empty-glyph {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 44px;
+	height: 44px;
+	margin-bottom: 12px;
+	border: 1.5px dashed var(--rs-gray-500);
+	border-radius: 10.5px;
+	color: var(--rs-gray-500);
+	font-size: 17.5px;
+	line-height: 1;
+}
+
+.rs-spinner {
+	display: inline-block;
+	flex-shrink: 0;
+	width: 14px;
+	height: 14px;
+	background: currentColor;
+	-webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.28.46a24 24 0 109.44 0l-.38 1.97a22 22 0 11-8.68 0L19.28.46z'/%3E%3C/svg%3E")
+		center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.28.46a24 24 0 109.44 0l-.38 1.97a22 22 0 11-8.68 0L19.28.46z'/%3E%3C/svg%3E")
+		center / contain no-repeat;
+	animation: rs-spin 1s linear infinite;
+}
+
+@keyframes rs-spin {
+	100% {
+		rotate: 360deg;
+	}
+}
+
+.rs-status {
+	display: inline-flex;
+	flex-shrink: 0;
+	align-items: center;
+	gap: 7px;
+	font-size: 12.25px;
+	line-height: 17.5px;
+	white-space: nowrap;
+}
+
+.rs-status[data-status="done"] > svg {
+	color: #22c55e;
+}
+
+.rs-status[data-status="timed-out"] > svg {
+	color: #f59e0b;
+}
+
+/* The way back from an opened asset to its library, or to the search results. */
+.rs-crumb {
+	flex-shrink: 0;
+	padding: 0;
+	border: 0;
+	background: none;
+	color: var(--rs-gray-500);
+	font-size: 15.75px;
+	line-height: 22px;
+	font-weight: 500;
+}
+
+.rs-crumb:hover,
+.rs-crumb:focus-visible {
+	outline: none;
+	color: var(--rs-fg);
+}
+
+/* Where a file dropped on the grid lands. */
+.rs-drop {
+	position: absolute;
+	inset: 7px;
+	z-index: 50;
+	border: 1px solid var(--rs-red);
+	border-radius: 14px;
+	background: rgba(255, 47, 102, 0.1);
+	opacity: 0;
+	pointer-events: none;
+	transition: opacity 150ms ease-out;
+}
+
+.rs-drop.is-active {
+	opacity: 1;
+}
+
+/* ---- sign-in ---- */
+
+.rs-auth {
+	display: flex;
+	flex-direction: column;
+	gap: 14px;
+	width: min(380px, 100%);
+	padding: 24px;
+}
+
+.rs-auth > .rs-brand {
+	padding: 0;
+}
+
+.rs-device {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 10.5px;
+	padding: 16px;
+	border: 1.5px dashed var(--rs-gray-500);
+	border-radius: 7px;
+}
+
+.rs-device-code {
+	font-size: 28px;
+	line-height: 1;
+	font-weight: 700;
+	letter-spacing: 0.08em;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.rs-library-menu,
+	.rs-library-menu > div {
+		transition: none;
+	}
+
+	.rs-spinner {
+		animation-duration: 3s;
+	}
+}