@import 'list'
@import 'dropdown'
.skin-presets
	display inline-block
	vertical-align top
	height 100%
	position relative
	transition width .55s ease .15s, background .55s ease .15s
	.after
		content ""
		display block
		position absolute
		width 0
		right 0
		top 0
		bottom 0
		border-right 2px dashed mediumgray
		opacity 1
		transition opacity .1s ease .1s

.skin-config .skin-presets
	background #fafafa
	z-index 2
	width 20.5%

.skin-preset-tooltip
	display block
	position absolute
	transition opacity 0.4s
	z-index 20
	height 30px
	background rgba(0,0,0,0.9)
	border-radius 2px
	color #fff
	font-size 14px
	line-height 30px
	font-smoothing antialiased
	padding 0 12px
	font-family 'ProximaNova-Semibold',Helvetica,sans-serif
	box-sizing border-box
	max-width 200px
	div
		max-width 100%
		overflow hidden
		text-align left
		text-overflow ellipsis
		white-space nowrap
	&:before
		content ""
		display block
		position absolute
		border 4px solid rgba(0,0,0,0.9)
		left -4px
		top 10px
		border-left 4px
		border-top-color transparent
		border-bottom-color transparent

.skin-presets.expanded
	width 100%
	background white
	.after
		opacity 0
		transition opacity .1s ease .55s
	.skin-header 
		.default
			display inline-block
			width 100%
			opacity 1
	.presets-list-item
		display inline-block
		vertical-align top
		width 50%
		margin 0px
		padding-top 20px
		transition width .01s ease .01s, opacity .3s ease, top .5s ease .2s, left .5s ease .2s
		&:first-child
			padding-top 0
			margin-top 20px
			height 40px
	.presets-list-colors .before
		opacity 0
		transition opacity .2s ease .01s
	.presets-list-name
		opacity 1
		transition opacity .15s ease .3s