mixin default-transition
	transition all transition-speed ease

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

mixin noise-light
	background-image url("/images/elements/noise-light.png")

mixin noise-strong
	background-image url("/images/elements/noise-strong.png")

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

mixin clip-long-text
	overflow hidden
	white-space nowrap
	text-overflow ellipsis

mixin anime-mini-item
	margin 0.25rem

mixin anime-mini-item-image
	width 55px !important
	height 78px !important
	border-radius 2px
	filter none
	transition filter transition-speed ease, opacity transition-speed ease
	
	:hover
		filter saturate(1.3)

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.06)

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