/*
 * https://github.com/morethanwords/tweb
 * Copyright (C) 2019-2021 Eduard Kuzmenko
 * https://github.com/morethanwords/tweb/blob/master/LICENSE
 */

.stickers-helper {
	position: absolute !important;
	bottom: calc(100% + 10px);
	overflow: hidden;
	padding: 0 !important;
  border-radius: 10px !important;

	> .scrollable {
		position: relative;
		max-height: 220px;
  	min-height: var(--esg-sticker-size);
	  padding: 7px;
	}

	&-stickers {
		display: flex;
    flex-wrap: wrap;
	}

	&-sticker {
		position: relative;
		width: var(--esg-sticker-size);
		height: var(--esg-sticker-size);
		margin: 5px;

		img {
			width: 100%;
			height: 100%;
		}
	}

	&:not(.is-visible) {
		display: none;
	}

	@include animation-level(2) {
		&.is-visible {
			animation: fade-out-opacity .2s ease-in-out forwards;

			&:not(.backwards) {
				animation: fade-in-opacity .2s ease-in-out forwards;
			}
		}
	}
}
