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

.emoji-dropdown {
  --menu-height: 3.0625rem;
	display: flex/*  !important */;
	flex-direction: column;
	width: 100%;
	//height: 282px;
	height: unquote('min(282px, calc(var(--vh) * 100 - 135px))');
	background: var(--surface-color);
	overflow: hidden;
	flex: 1 1 auto;
	max-height: 100%;
	user-select: none;
	
	@include respond-to(esg-top) {
		position: absolute !important;
		left: $chat-padding;
		bottom: 5.125rem;
		width: 26.25rem !important;
		height: 26.25rem;
		max-height: 26.25rem;
		box-shadow: 0px 5px 10px 5px rgba(16, 35, 47, .14);
		z-index: 3;
		border-radius: $border-radius-medium;
		transition: transform var(--esg-transition), opacity var(--esg-transition);
		transform: scale(0);
		opacity: 0;
		transform-origin: 0 100%;

		&.active {
			opacity: 1;
			transform: scale(1);
		}

		body.animation-level-0 & {
			transition: none;
		}
	}

	.emoji-container {
		width: 100%;
		max-width: 100%;
		overflow: hidden;
		height: 100%;

    .menu-wrapper {
			padding: 0;
			height: var(--menu-height);
			max-width: 100%;
      position: relative;
      border-bottom: 1px solid var(--border-color);
      background-color: var(--surface-color);
		}

    .menu-horizontal-div {
      z-index: 4;
			background-color: var(--surface-color);

      &-item {
        flex: 0 0 auto;
        padding: .25rem;
        margin: 0 .3125rem;
  
        &-padding {
          width: 100%;
          height: 100%;
          position: relative;
        }
        
        &.active {
          &:not(.tgico) {
            background-color: var(--light-secondary-text-color);
          }
        }
      }
    }
	}

	.emoji-tabs {
		justify-content: center;
		//font-weight: 500;
		border: none;
		border-top: 1px solid var(--border-color);

		&-search {
			position: absolute;
			left: 0;
			margin-left: .5rem !important;
		}

		&-delete {
			position: absolute;
			right: 0;
			margin-right: .5rem !important;
		}

    .menu-horizontal-div-item {
      margin: 0 1rem;
    }
	}

  .category-title {
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-14);
    color: var(--secondary-text-color);
    padding: .8125rem .875rem .6875rem;
    width: 100%;
    position: relative;

    .btn-icon {
      position: absolute;
      right: 0.5rem;
      top: 50%;
      transform: translateY(-50%);
      font-size: 1.25rem;
      z-index: 1;
      pointer-events: all;
    }
  }
	
	.tabs-container {
		height: 100%;

		.sticky_sentinel {
			&--top {
				top: 0;
				height: 1px;
			}
		}
		
		.tabs-tab {
			min-height: 100%;
			/* display: flex; */
			flex-direction: column;
			height: 100%;
		}

		.emoticons-content {
			flex: 1;
			padding: 0;
			position: relative;
      background-color: var(--surface-color);
		}
	}
	
	.emoji-padding {
    .super-emojis {
      padding: 0 .5rem;
    }
	}
	
	.emoji-category {
		position: relative;
	}
	
	.menu-horizontal-div {
		width: 100%;
		height: var(--menu-height);
    min-height: var(--menu-height);
    align-items: center;

		&-item {
			font-size: 1.5rem;
			width: 2.5rem;
			height: 2.5rem;
			line-height: 2.5rem;
			display: flex;
			align-items: center;
			flex: 0 0 auto;
      padding: 0;
		}
	} 

	.stickers-padding {
    .category-title {
			cursor: pointer;
		}

		.category-items {
      padding: 0 .3125rem;
		}
	}
}