@require '~styles/variables'

.fade-collapse
	position: relative
	overflow: hidden

	@media $media-sm-up
		&.-animate
			transition: max-height 600ms $strong-ease-out

.-fade
	position: absolute
	display: none
	bottom: 0
	left: 0
	right: 0
	height: 100px
	z-index: 1
	background-image: linear-gradient(to bottom, var(--theme-bg-actual-trans) 0, var(--theme-bg-actual) 100%)

	.-sm &
		height: 30px

	// We need this full name since it's targeted in other components to change the styling.
	.fade-collapse-collapsed &
		display: block
