Split mixins into multiple files

styles/mixins/anime-grid.scarlet

@@ -0,0 +1,30 @@
+mixin anime-mini-item
+	margin 0.25rem
+
+mixin anime-generic-item-image
+	object-fit cover
+	border-radius 2px
+	filter none
+	transition filter transition-speed ease, opacity transition-speed ease
+
+	:hover
+		filter saturate(1.3)
+
+mixin anime-mini-item-image
+	width anime-image-small-width !important
+	height anime-image-small-height !important
+	anime-generic-item-image
+
+	// Make it easier for the browser to layout by specifying max size as well
+	max-width anime-image-small-width
+	max-height anime-image-small-height
+
+mixin anime-list-item-image
+	width anime-image-tiny-width
+	height anime-image-tiny-height
+	border-radius 2px
+	object-fit cover
+
+	// Make it easier for the browser to layout by specifying max size as well
+	max-width anime-image-tiny-width
+	max-height anime-image-tiny-height

styles/mixins/effects.scarlet

@@ -0,0 +1,39 @@
+mixin bg-dark-up
+	background-color transparent
+	:hover
+		background-color rgba(0, 0, 0, 0.015)
+
+mixin bg-light-up
+	background-color transparent
+	:hover
+		background-color rgba(255, 255, 255, 0.015)
+
+mixin light-up
+	filter brightness(0.4) saturate(1)
+	:hover
+		filter brightness(1) saturate(1.3)
+
+mixin saturate-up
+	filter saturate(1)
+	:hover
+		filter saturate(1.3)
+
+mixin saturate-up
+	filter saturate(1)
+	:hover
+		filter saturate(1.3)
+
+mixin scale-up
+	transform scale(1)
+	:hover
+		transform scale(1.056338)
+
+mixin shadow-up
+	box-shadow shadow-light
+	:hover
+		box-shadow shadow-medium
+
+mixin outline-shadow-up
+	box-shadow outline-shadow-light
+	:hover
+		box-shadow outline-shadow-medium

styles/mixins/feature-card.scarlet

@@ -0,0 +1,4 @@
+mixin feature-card-footer
+	font-size 0.9rem
+	opacity 0.5
+	margin-top 0

styles/mixins/layout.scarlet

@@ -0,0 +1,23 @@
+mixin horizontal
+	display flex
+	flex-direction row
+
+mixin horizontal-wrap
+	display flex
+	flex-flow row wrap
+
+mixin horizontal-wrap-center
+	horizontal-wrap
+	justify-content center
+
+mixin vertical
+	display flex
+	flex-direction column
+
+mixin vertical-wrap
+	display flex
+	flex-flow column wrap
+
+mixin vertical-wrap-center
+	horizontal-wrap
+	align-items center

styles/mixins/sidebar.scarlet

@@ -0,0 +1,13 @@
+mixin sidebar
+	vertical
+	margin-left 0
+	margin-top 1rem
+	flex-shrink 0
+
+mixin sidebar-medium
+	margin-left content-padding
+	margin-top 0
+	flex-basis 270px
+
+mixin sidebar-big
+	flex-basis 300px

styles/mixins/ui.scarlet

@@ -0,0 +1,13 @@
+mixin ui-element
+	border 1px solid ui-border-color
+	background ui-background
+	border-radius ui-element-border-radius
+	default-transition
+	:hover
+		border-color ui-hover-border-color
+		// background ui-hover-background
+		// box-shadow outline-shadow-medium
+
+mixin ui-disabled
+	background-color ui-disabled-color
+	cursor not-allowed

styles/mixins/utils.scarlet

@@ -0,0 +1,13 @@
+mixin default-transition
+	transition all transition-speed ease
+
+mixin noise-light
+	background-image url("//media.notify.moe/images/elements/noise-light.png")
+
+mixin noise-strong
+	background-image url("//media.notify.moe/images/elements/noise-strong.png")
+
+mixin clip-long-text
+	overflow hidden
+	white-space nowrap
+	text-overflow ellipsis