tweb-i2p/src/scss/partials/_emojiDropdown.scss

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

$menu-item-active-opacity: .8;
$menu-item-active-background-opacity: .06;
$menu-inner-transition: cubic-bezier(0.42, 0.0, 0.58, 1.0);
$menu-transition-duration: .2s;
$menu-height: 3.0625rem;

.emoji-dropdown {
	display: flex/*  !important */;
	flex-direction: column;
	width: var(--esg-width);
	//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;
		height: 26.25rem;
		max-height: 26.25rem;
		box-shadow: 0px 5px 10px 5px rgba(16, 35, 47, .14);
		z-index: 3;
		border-radius: 1.25rem;
		transition: transform var(--esg-transition), opacity var(--esg-transition);
		transform: scale(0);
		opacity: 0;
		transform-origin: 0 100%;
    backdrop-filter: var(--menu-backdrop-filter);
    background-color: var(--menu-background-color);
    // background-color: rgba(var(--surface-color-rgb), var(--backdrop-opacity));

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

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

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

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

    &:after {
      content: none;
    }

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

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

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

	.tabs-container {
		height: 100%;
	}

	.stickers-padding {
		.category-items {
      gap: .25rem;
      padding: 0 .1875rem;
		}
	}

  // .tabs-tab.scrolled-top {
  //   .menu-horizontal-div,
  //   .menu-wrapper {
  //     border-bottom-color: transparent;
  //   }
  // }

  #content-gifs {
    .scrollable-y {
      padding: 0 .1875rem;
    }
  }

  .gifs-masonry {
    border-radius: $border-radius-medium;
    overflow: hidden;
  }
}

.emoticons {
  &-container {
    min-height: 100%;
    /* display: flex; */
    flex-direction: column;
    height: 100%;
    background-color: transparent;
  }

  &-menu {
    --item-size: 1.875rem;
		width: 100%;
		height: $menu-height;
    min-height: $menu-height;
    align-items: center;
    padding: 0 .3125rem;

    // exclusive
    z-index: 4;
    // background-color: var(--surface-color);
    background-color: transparent;

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

    &:after {
      content: " ";
      display: block;
      flex: 0 0 auto;
      width: .1875rem;
      height: 1px;
    }

    .menu-horizontal-div-item {
      font-size: 1.5rem;
      width: var(--item-size);
      height: var(--item-size);
      line-height: var(--item-size);
      display: flex;
      align-items: center;
      flex: 0 0 auto;
      padding: 0;
      margin: 0 .3125rem;

      // exclusive
      flex: 0 0 auto;

      &.not-local {
        --item-size: 2.375rem;
        padding: .25rem;
        border-radius: .25rem !important;
      }

      &.active {
        background-color: rgba(var(--primary-text-color-rgb), $menu-item-active-background-opacity) !important;
        color: rgba(var(--primary-text-color-rgb), $menu-item-active-opacity) !important;
      }

      @include hover() {
        color: rgba(var(--primary-text-color-rgb), $menu-item-active-opacity) !important;
      }

      &-padding {
        width: 100%;
        height: 100%;
        position: relative;
      }

      &.active {
        &:not(.tgico) {
          background-color: var(--light-secondary-text-color);
        }
      }
    }

    .menu-horizontal-inner {
      overflow: hidden;
      flex: 0 0 auto;
      width: 1.875rem;
      border-radius: 15px;
      margin: 0 .3125rem;

      html.is-safari & {
        -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
      }

      @include animation-level(2) {
        transition: width $menu-transition-duration $menu-inner-transition;
      }

      &-scroll {
        position: relative;
        width: 8.5rem;
        height: 100%;
        display: flex;
        align-items: center;
      }

      .menu-horizontal-div-item {
        transform: scale(1);
        margin: 0 !important;

        // &:first-child {
        //   margin-left: 0;
        // }

        // &:last-child {
        //   margin-right: 0;
        // }

        @include animation-level(2) {
          transition: transform $menu-transition-duration $menu-inner-transition !important;
        }
      }

      &.active {
        width: 8.5rem;
        background-color: rgba(var(--primary-text-color-rgb), $menu-item-active-background-opacity) !important;

        .menu-horizontal-div-item {
          transform: scale(.8);

          &.active {
            background-color: transparent !important;
          }
        }
      }

      &:not(.active) {
        cursor: pointer;

        .menu-horizontal-inner-scroll {
          pointer-events: none;
        }

        .menu-horizontal-div-item:first-child {
          pointer-events: all;
        }
      }
    }
  }

  &-content {
    flex: 1;
    padding: 0;
    position: relative;
    // background-color: var(--surface-color);

    .emoji-category {
      position: relative;
    }

    .sticky_sentinel {
			&--top {
				top: 0;
				height: 1px;
			}
		}

    .category-title {
      font-size: var(--font-size-16);
      font-weight: var(--font-weight-bold);
      // line-height: var(--line-height-14);
      line-height: 1.1875rem;
      // color: var(--secondary-text-color);
      color: rgba(var(--primary-text-color-rgb), .42);
      padding: .75rem .875rem .375rem;
      width: 100%;
      position: relative;
      text-align: center;
      cursor: pointer;

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

    &:not(.has-premium) .is-premium-set {
      .category-title {
        &:before {
          content: $tgico-premium_lock;
          line-height: inherit;
          vertical-align: middle;
          margin-right: 0.125rem;
        }
      }
    }
  }
}

.emoji-padding {
  .super-emojis {
    padding: 0 .5rem;
  }
}