@require '~styles/variables'
@require '~styles-lib/mixins'

.fade-enter-active, .fade-leave-active
	transition: opacity 0.05s

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

.emoji-button
	transition: filter 0.15s, transform 0.2s ease
	cursor: pointer
	image-rendering: pixelated

	&:not(:hover)
		filter: grayscale(1) opacity(75%)

	&:hover
		transform: scale(1.2)

	&:focus
		outline: none

.emoji-button-active
	filter: none !important
	transform: scale(1.2)

.emoji-panel
	elevate-2()
	rounded-corners-lg()
	change-bg('bg-offset')
	position: absolute
	bottom: 32px
	right: -8px
	display: flex
	flex-wrap: wrap
	width: 320px
	padding: 10px 8px 8px 8px
	z-index: $zindex-content-editor
	cursor: default

	&:focus
		outline: none

.emoji-box
	padding: 6px
	rounded-corners()
	cursor: pointer

	&:hover
		change-bg('bg-subtle')

	& > span
		cursor: pointer
