@import '~styles/variables'
@import '~styles-lib/mixins'
@import '../variables'

.content-editor-controls
	position: absolute
	z-index: $zindex-content-editor

	&:hover
		outline: 0 solid transparent !important

.-add-button
	transition: transform 0.2s ease

.-add-button-rotated
	transform: rotate(-45deg)

.fade-enter-active
.fade-leave-active
	transition: opacity 0.2s

.fade-enter
.fade-leave-to
	opacity: 0

.controls-mobile
	position: fixed
	top: auto !important
	bottom: 0 !important
	left: 0 !important
	right: 0 !important

	& > div
		display: flex
		justify-content: center
		align-items: center
		change-bg('bg-offset')
		theme-prop('border-color', 'bg-subtle')
		padding-left: 4px
		padding-right: 4px

		& > .control-button
			padding-top: 0
			padding-bottom: 0

		& > .control-button > span
			margin: $controls-margin-vertical $controls-margin-horizontal
			font-size: $controls-font-size !important

.control-button
	cursor: pointer
	display: inline-block
	pressy()
	background-color: transparent
	border-style: none

.btn-stagger
	for i in 2 .. 40
		&:nth-child({i})
			animation-delay: 20ms * i
