.presets-list
	top 70px
	bottom 0
	z-index 1
	left 0
	right 0
	position absolute
	.scrolling-container > .scroll-content
		right -16px
	.mCSB_draggerContainer
		bottom 20px
		top 20px
	.mCSB_scrollTools
		right auto
		left 2px
.editor[userskins='0'],
.presets-list[data-filter='presets']
	.is-preset:after
		background transparent!important
.presets-list-changes
	user-select none
	font-smoothing antialiased
	color #a0a0a0
	text-align center
	width 60px
	overflow hidden
	white-space normal
	.total,.text,.savetxt
		line-height 1
	.total
		font-size 36px
		font-family 'ProximaNova-Thin',Helvetica,sans-serif
		padding-top 30px
		padding-bottom 5px
	.text,.savetxt
		font-size 14px
		font-family 'ProximaNova-Semibold',Helvetica,sans-serif
	.savetxt
		margin-top 18px
	.save
	.cancel
		pointer-events auto !important
		cursor pointer
		font-size 14px
		line-height 25px
		display inline-block
		width 50px
		height 25px
		margin 0
		color white
		border-radius 2px
	.save
		background #0055FF
		margin-top 20px
		&:hover
			background #0040C1
	.cancel
		background #645966
		margin-top 5px
		&:hover
			background lighten(#645966, 20%)

.presets-list-item
	height 60px
	width 100px
	min-width 91px
	overflow hidden
	padding-left 20px
	position absolute
	display inline-block
	vertical-align top
	transition height 0.4s ease .3s, margin .15s ease .3s, width .5s ease .3s, opacity .3s ease, top .5s ease .2s, left .5s ease .2s
	box-sizing border-box
	white-space nowrap
	zoom 1
	cursor pointer
	opacity 0
	&.skin--added
		opacity 1
	&:first-child
		margin-top 20px
		height 40px
	& + &
		padding-top 20px
	&.changed
		height 430px
		padding-top 20px
		transition height .5s ease .2s, top 0.5s ease 0.2s
		.presets-list-colors
			pointer-events none
		&:first-child
			padding-top 0
	&.is-preset .presets-list-colors:after
		box-shadow inset 0px 0px 3px rgba(0,0,0,0.40)
	&.can-delete
		.presets-list-delete
			display block
	&.active
		cursor default
		.presets-list-colors .before
			display block
		.presets-list-colors:after
		.presets-list-colors:hover:after
			@extend [data-icon]:before
			content "✓"
			color litepurple
			background rgba(white, 80%)
			box-shadow inset 0 0 0 2px litepurple, inset 0px 0px 3px rgba(0,0,0,0.60)
			border-radius 0px
			font-size 13px
			line-height 41px
			text-align center
	&.active, &:hover
		.presets-list-name
			color litepurple
	&:after
		content ""
		display block
		absolute top left
		bottom 0
		right 1px
		z-index -1
	&.is-preset .presets-list-colors:before
		content ""
	&.is-preset.active .presets-list-colors:before
		content none
.presets-list-delete
	position absolute
	width 21px
	display none
	height 21px
	border-radius 11px
	background #fff
	overflow hidden
	color #c4363e
	font-size 12px
	text-align center
	line-height 25px
	left -13px
	top -4px
	z-index 1
	opacity 0
	transition top .25s ease, left 0.25s ease,opacity 0.1s ease
	box-shadow inset 0 0 0 1px #d5d5d5
	&:hover
		color white
		background #c4363e
		box-shadow inset 0 0 0 1px #c4363e

.presets-list-colors
	width 60px
	height 40px
	position relative
	border-radius 2px
	white-space nowrap
	font-size 0
	display inline-block
	vertical-align top
	// overflow hidden
	//after is used for hover state
	&:hover .presets-list-delete
		opacity 1
		left -6px
		top -4px
	&:after
		absolute bottom right
		top 0px
		left 0px
		content ""
		border-radius 2px
		color rgba(#6a5e6c, 65%)
		font-size 13px
		text-align center
		box-shadow inset 0px 0px 3px rgba(0,0,0,0.60)
	.before
		width 14px
		height 14px
		position absolute
		right -30px
		top 10px
		content ""
		display none
		opacity 1
		background white
		transition opacity .3s ease .65s
		border 2px dashed mediumgray
		transform rotate(45deg)
	&:before
		absolute bottom right
		display block
		width 33px
		height 9px
		background bgreen url('img/skin/preset.png') no-repeat center
		z-index 1
	// &:before
	// 	content ""
	// 	position absolute
	// 	width 125px
	// 	height 36px
	// 	background transparent none
	// 	right -125px

.expanded .presets-list-item:hover .presets-list-colors:after
.presets-list-colors:hover:after
	@extend [data-icon]:before
	content "✓"
	line-height 41px
	pointer-events none

.presets-list-color
	height 100%
	display inline-block

.presets-list-name
	display inline-block
	vertical-align top
	font 14px/36px 'ProximaNova-Regular'
	width 115px
	color darkpurple
	padding-left 10px
	opacity 0
	transition opacity .15s ease
	white-space normal
	span
		display inline-block
		vertical-align middle
		line-height 18px

for num in 2 3 4 5
	.presets-list-colors[colors="{num}")] .presets-list-color
		width (100/num)%

.presets-list-delete + .presets-list-color
	border-top-left-radius 2px
	border-bottom-left-radius 2px
.presets-list-color:last-child
	border-top-right-radius 2px
	border-bottom-right-radius 2px


html.isTouch .presets-list-delete
	opacity 1
	left -6px
	top -4px
