Scrim new

app/features/availability/components/WeekAvailabilityEditor.module.css

@@ -1,5 +1,5 @@
-.container {
-	container: editor / inline-size;
+.paintable {
+	cursor: crosshair;
 }
 
 .editor {
@@ -8,121 +8,6 @@
 	gap: var(--s-3);
 }
 
-.tracks {
-	display: none;
-}
-
-.list {
-	display: flex;
-	flex-direction: column;
-}
-
-@container editor (min-width: 40rem) {
-	.tracks {
-		display: grid;
-		grid-template-columns: max-content minmax(0, 1fr) max-content;
-		column-gap: var(--s-3);
-		row-gap: var(--s-2);
-		align-items: center;
-	}
-
-	.list {
-		display: none;
-	}
-}
-
-.axisToggle {
-	display: flex;
-	align-items: center;
-	gap: 2px;
-	align-self: end;
-	padding: 0;
-	background: none;
-	border: none;
-	font-size: var(--font-3xs);
-	line-height: 1rem;
-	color: var(--color-text-high);
-	white-space: nowrap;
-	cursor: pointer;
-
-	&:hover {
-		color: var(--color-text);
-	}
-
-	&:focus-visible {
-		outline: var(--focus-ring);
-	}
-}
-
-.axisLead {
-	justify-self: start;
-}
-
-.axisTrail {
-	justify-self: end;
-}
-
-.axis {
-	position: relative;
-	height: 1rem;
-	align-self: end;
-
-	& .axisLabel {
-		position: absolute;
-		top: 0;
-		transform: translateX(-50%);
-		font-size: var(--font-3xs);
-		line-height: 1rem;
-		color: var(--color-text-high);
-		white-space: nowrap;
-
-		&.axisLabelFirst {
-			transform: translateX(0);
-		}
-
-		&.axisLabelLast {
-			transform: translateX(-100%);
-		}
-	}
-}
-
-.dayLabel {
-	display: flex;
-	align-items: center;
-	gap: var(--s-1);
-	font-size: var(--font-xs);
-	font-weight: var(--weight-semi);
-	white-space: nowrap;
-}
-
-.noteFlag {
-	color: var(--color-text-accent);
-	flex-shrink: 0;
-}
-
-.track {
-	position: relative;
-	height: 32px;
-	background-color: var(--color-bg-high);
-	border-radius: var(--radius-field);
-	touch-action: none;
-	cursor: crosshair;
-	user-select: none;
-}
-
-.tick {
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	width: 1px;
-	background-color: var(--color-bg-higher);
-	pointer-events: none;
-
-	&.tickMidnight {
-		background-color: var(--color-border);
-	}
-}
-
 .bar {
 	container: bar / inline-size;
 	position: absolute;
@@ -211,37 +96,6 @@
 	}
 }
 
-.commitment {
-	position: absolute;
-	top: 3px;
-	bottom: 3px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	overflow: hidden;
-	background: repeating-linear-gradient(
-		-45deg,
-		var(--color-bg-higher) 0 5px,
-		transparent 5px 10px
-	);
-	border: 1px dashed var(--color-border-high);
-	border-radius: var(--radius-field);
-	pointer-events: none;
-	z-index: 2;
-}
-
-.commitmentName {
-	max-width: 100%;
-	padding-inline: var(--s-1);
-	font-size: var(--font-3xs);
-	color: var(--color-text-high);
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	background-color: var(--color-bg);
-	border-radius: var(--radius-full);
-}
-
 .liveLabel {
 	position: absolute;
 	bottom: calc(100% + 4px);
@@ -320,19 +174,6 @@
 	}
 }
 
-.commitmentChip {
-	padding: var(--s-0-5) var(--s-2);
-	background: repeating-linear-gradient(
-		-45deg,
-		var(--color-bg-higher) 0 5px,
-		transparent 5px 10px
-	);
-	border: 1px dashed var(--color-border-high);
-	border-radius: var(--radius-full);
-	font-size: var(--font-xs);
-	color: var(--color-text-high);
-}
-
 .addChip {
 	display: inline-flex;
 	align-items: center;