@import './presets'
@import './editor'
@import './popup'
.skin-config
	position relative
	height 100%
	border-right 1px solid #e9e9e9
	&.activateable
		visibility hidden
		z-index -1
		&.active
			visibility visible
			z-index 0

.toggle-skin-edit-wrapper
	margin 17px 17px 17px 0px
	height 34px
	absolute top right
	overflow hidden
	padding-left 20px

.toggle-skin-edit-wrapper
.toggle-skin-edit
	display inline-block
	vertical-align top
.toggle-skin-edit
	height 32px
	font 14px/33px 'ProximaNova-Semibold'
	border 1px solid mediumgray
	border-left-width 0
	margin-right 1px
	border-radius 2px
	cursor pointer
	font-smoothing antialiased
	background #fafafa
	position relative
	width 53px
	transition width .45s ease .25s, padding .35s ease .35s
	&:hover
		color litepurple
		background white
		&:before
			background white
	&:before
		background #fafafa
		display block
		content ""
		position absolute
		top 3px
		left -12px
		width 22px
		height 23px
		transform rotate(45deg)
		border 1px solid #d5d5d5
		border-top-color transparent
		border-right-color transparent
		border-radius 2px
		transition .55s ease .25s
		transition-property top, left, width, opacity, content
		z-index -1
	.content
		display inline-block
		overflow hidden
		width 100%
		height 100%
		position relative
		padding 0 10px 0 6px
		box-sizing border-box
	.back, .edit
		display inline-block
		absolute top
		text-align center
		width 100%
		height 100%
		box-sizing border-box
		transition left .45s ease .20s
	.back
		left 0
		padding-right 6px
	.edit
		left 86px
	.skin-presets.expanded &
		border-left-width 1px
		width 85px
		transition width .45s ease .25s, border .35s ease .35s, padding .35s ease .35s
		.content
			padding 0 10px
		.back
			left -86px
		.edit
			left 0
		&:before
			opacity 0
			left 4px
	&.no-hover, .skin-presets.expanded &.no-hover
		color darkpurple
		transition width .45s ease .25s, border .35s ease .35s, padding .35s ease .35s, color .01s ease .35s, background .01s ease .35s
		&, &:before
			background #fafafa
		&:before
			transition-property top, left, width, opacity, content, background
	&.no-action
		cursor default
		color mediumgray
		&, &:before
			background #fafafa

.skin-header
	text-transform uppercase
	height 69px
	border-bottom 1px solid mediumgray
	position relative
	z-index 2
	right 2px
	background #fafafa
	color darkpurple
	white-space nowrap
	top -70px
	transition right .01s ease .45s
	.default
		display inline-block
		white-space nowrap
		overflow hidden
		opacity 0
		width 100%
		transition opacity .3s ease .3s
		.title
			width 360px
			text-align left
			padding-left 30px
			display inline-block
			font 14px/69px 'ProximaNova-Semibold'
			font-smoothing antialiased
	.expanded &
		right 0
		transition right .01s ease .2s, top .35s ease .15s
	.editor[current-view] &
		top 0