/*! blogvio_editor/editor/footer.styl */
.editor-footer
	position relative
	border-radius 0 0 4px 4px
	overflow hidden

	bottom -55px
	transition bottom .55s ease .05s
	.editor[current-view] &
		bottom 0
.editor-prev-btn
	position absolute
	right 101px
	height 35px
	top 10px
	font 14px/35px 'ProximaNova-Semibold'
	text-transform uppercase
	color darkpurple
	cursor pointer
	&:hover
		color litepurple
	&.disabled
		color mediumgray
		cursor default
.editor-next-btn
	display inline-block
	vertical-align top
	color #fff
	font-smoothing antialiased
	height 35px
	width 45px
	padding 0 0 0 5px
	font-size 14px
	border-radius 2px 0 0 2px
	cursor pointer
	position absolute
	top 10px
	right 36px
	text-transform uppercase
	line-height 35px
	text-align right
	z-index 0
	background #ec574d
	&:after
		display block
		position absolute
		top 0
		left 0
		right 5px
		bottom 0
		content "Next"
		z-index -1
	&:before
		content ""
		display block
		position absolute
		top 0
		right -15px
		z-index -1
		width 0
		height 0
		border-style solid
		border-width 18px 0 17.5px 15px
		border-color transparent transparent transparent #ec574d

	&:hover
		background lighten(#ec574d, 25%)
		&:before
			border-color transparent transparent transparent lighten(#ec574d, 25%)

.editor-breadcrumbs
	a
		display inline-block
		margin 0 3px
		padding-top 0
		cursor pointer
		color darkgray
		outline none
		&:hover
			color litepurple
		&.active
			color darkpurple
			cursor default
			pointer-events none
		&:before
			display inline-block
			vertical-align top
			padding-right 6px
			font-size 14px
			color darkgray
			content ">"
		&:first-child
			margin-left 0
			display none
			&:before
				display none
			&:not(:nth-last-child(2))
				display inline-block

.editor-breadcrumbs
	height 34px
	margin 0
	border-top 1px solid mediumgray
	padding 10px 0 10px 20px
	font-size 12px
	line-height 35px
	text-transform uppercase
	color darkgray
	background #fafafa
	font-smoothing antialiased
	user-select none

a.done
	display none !important

.editor[minvalid='true']
	a.details
		pointer-events auto !important
		opacity 1 !important

.editor[minvalid='true'][current-view='content']
	.editor-next-btn
		cursor pointer
		pointer-events auto
		text-shadow 0 1px #9854a5

.editor:not([current-view])
	.editor-breadcrumbs
		.activateable.skin
			@extends .editor-breadcrumbs a.active
	.editor-prev-btn
		@extends .editor-prev-btn.disabled

.editor[current-view='save'][persisted-comp='false']
.editor[current-view='details'][persisted-comp='false']
.editor[current-view='save']
.editor[data-steps="skin done"]
	.editor-prev-btn
		right 115px
	.editor-next-btn
		cursor pointer
		opacity 1
		right 48px
		pointer-events auto
		&:after
			content "Publish"
			width 80px
		&:hover:after
			background lighten(#ec574d, 25%)

.editor[current-view='details']
.editor[current-view='save']
.editor[data-steps="skin done"]
	.editor-prev-btn
		right 101px
	.editor-next-btn
		display inline-block
		right 36px
		text-align center
		&:before
			content none
		&:after
			content "Done"
			background #ec574d
			width 55px
			border-radius 2px
.editor[data-steps="skin done"]
	.editor-prev-btn
		display none
	.editor-next-btn
		right 23px

.editor[current-view='save'][persisted-comp='true']
.editor[current-view='details'][persisted-comp='true']
.editor[data-steps="skin done"]
	.editor-next-btn
		&:after
			background #ec574d
		&:hover:after
			background lighten(#ec574d, 25%)
