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

.lazy-placeholder
	lazy-placeholder-block()

	span&, small&
		lazy-placeholder-inline()

	span&
		height: $font-size-base

	small&
		height: $font-size-small

	&-h1
		height: $font-size-h1 * 1.2 !important
		margin-bottom: ($font-size-base / 2)

	&-h2
		height: $font-size-h2 * 1.2 !important
		margin-bottom: ($font-size-base / 2)

	&-h3
		height: $font-size-h3 * 1.2 !important
		margin-bottom: ($font-size-base / 2)

	&-h4
		height: $font-size-h4 * 1.2 !important
		margin-bottom: ($font-size-base / 2)

// For immediate transition between visibility of elements.
.lazy-placeholder-resolving :not(.lazy-placeholder)
	display: none

.lazy-placeholder-resolved .lazy-placeholder
	display: none
