/*
 * 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;
// $menu-search-translateY: -2.5rem;
$menu-search-translateY: -#{$menu-height};

.emoji-dropdown {
  --width: 23.875rem;
  --height: 26.25rem;
	display: flex/*  !important */;
	flex-direction: column;
	width: var(--width);
	height: var(--height);
	background: var(--surface-color);
	overflow: hidden;
	flex: 1 1 auto;
	user-select: none;
  position: absolute;
  inset-inline-start: $chat-padding;
  bottom: 5.125rem;
  max-width: calc(100% - 1rem);
  max-height: 26.25rem;
  box-shadow: 0px 5px 10px 5px rgba(16, 35, 47, .14);
  z-index: 4;
  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));

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

  .is-rtl & {
    transform-origin: 100% 100%;
  }

  &.smaller {
    --height: 20rem;
    max-height: 20rem;
  }

  &.is-standalone {
    transform-origin: calc(9rem * var(--reflect)) 4.625rem !important;
    transform: scale(.85);
    bottom: auto;
    inset-inline-start: auto;
    top: unquote('min(100vh - var(--height) - .5rem, var(--top))');
    left: unquote('min(100vw - var(--width) - .5rem, max(.5rem, var(--left)))');
  }

  &.is-under {
    --width: 100%;
    --height: min(282px, calc(var(--vh) * 100 - 135px));
    position: relative;
    transform: none;
    inset: unset;
    border-radius: unset;
    max-width: 100%;
    max-height: 100%;
  }

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

  &.shrink {
    // height: auto;

    .emoticons-content .scrollable-y {
      position: relative;
    }
  }

	.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;
			inset-inline-start: 0;
			margin-inline-start: .5rem !important;
		}

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

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

	.tabs-container {
		height: 100%;
	}

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

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

  .gifs-masonry {
    margin: .25rem .1875rem .1875rem;
    border-radius: $border-radius-medium;
    overflow: hidden;
  }
}

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

    &.no-menu {
      .emoticons-search-container {
        margin-top: .5rem;
      }

      .scrollable-y {
        height: 100%;
        max-height: 100%;
      }

      .emoticons-categories-container:after {
        display: none;
      }
    }
  }

  &-will-move {
    &-up,
    &-down {
      @include animation-level(2) {
        transition: transform var(--transition-standard-in);
      }
    }

    &-up {
      .is-searching & {
        transform: translateY(#{$menu-search-translateY});
      }
    }

    &-down {
      .is-searching & {
        transform: translateY(.5rem);
      }
    }
  }

  &-menu {
    --item-size: 1.875rem;
		width: 100%;
		height: $menu-height;
    min-height: $menu-height;
    align-items: center;
    padding: 0 .3125rem;
    z-index: 4;
    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;

      &.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;
      }
    }

    .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;

        @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);

    // .scrollable-y,
    // &.is-loaded .preloader {
    //   opacity: 0;
    // }

    // &.is-loaded .scrollable-y,
    // .preloader {
    //   opacity: 1;
    // }

    // .preloader,
    // .scrollable-y {
    //   @include animation-level(2) {
    //     transition: opacity var(--transition-standard-out);
    //   }
    // }

    .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;
        inset-inline-end: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.25rem;
        z-index: 1;
        pointer-events: all;
      }

      &-lock {
        line-height: inherit;
        vertical-align: middle;
        margin-inline-end: 0.125rem;
        display: none;
      }
    }

    &:not(.has-premium) .is-premium-set {
      .category-title-lock {
        display: inline;
      }
    }

    .scrollable-y {
      height: calc(100% + #{$menu-height});
      max-height: none;
      // padding-bottom: .5rem;
    }
  }

  &-search {
    &-container {
      height: 2.375rem;
      margin: 0 .5rem .25rem;
      border-radius: $border-radius-medium;
      background-color: rgba(var(--primary-text-color-rgb), #{$menu-item-active-background-opacity});
    }

    &-input {
      background: none;
      border-radius: inherit;
      border: none;

      &-container {
        --height: 2.375rem;
        --icon-size: 1.25rem;
        --primary-color: var(--secondary-text-color);
        --border-width: 0px;
        --padding-horizontal: calc(var(--icon-size) + 1.375rem);
        --icon-left-offset: 1rem;
        background: none;
        border-radius: inherit;
        margin: 0;

        .input-search-clear {
          inset-inline-end: .1875rem;
        }
      }

      &-arrow {
        pointer-events: all;
        inset-inline-start: calc(var(--icon-left-offset) - (2rem - var(--icon-size)) / 2 - .125rem);
        font-size: 1.5rem !important;
        padding: 0.25rem !important;

        &.is-hiding {
          pointer-events: none;
        }
      }

      &-scrollable {
        position: absolute;
        width: auto;
        height: auto;
        inset: 0;
        inset-inline-start: var(--padding-horizontal);
        display: flex;
        align-items: center;
        justify-content: space-between;
        pointer-events: all;
        z-index: 1;
        opacity: 1;

        @include animation-level(2) {
          transition: opacity var(--transition-standard-in);
        }

        &.is-searching {
          pointer-events: none;
          opacity: 0;
        }

        &.is-scrolled {
          -webkit-mask-image: linear-gradient(
            to right,
            rgba(0, 0, 0, 0) 0%,
            rgb(0, 0, 0) .75rem
          );
        }

        .input-search-placeholder {
          inset-inline-start: auto;
          position: relative;
          min-width: 132px;
          cursor: text;
          pointer-events: all;
        }
      }

      &-categories {
        display: flex;
        position: relative;
        margin-inline-end: .375rem;
        gap: 7px;
      }

      &-category {
        width: 1.75rem;
        height: 1.75rem;
        border-radius: 50%;
        cursor: pointer;
        padding: .125rem;

        &-sticker {
          opacity: .3;
          position: relative;
          width: 100%;
          height: 100%;
          pointer-events: none;
        }

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

        &.active &-sticker {
          opacity: .7;
        }

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

  &-categories {
    &-container {
      width: 100%;

      &.emoticons-has-search:after {
        content: " ";
        display: block;
        height: calc(#{$menu-height} + .5rem);

        .is-searching & {
          height: .5rem;
        }
      }
    }
  }

  &-not-found {
    color: rgba(var(--primary-text-color-rgb), .42);
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    font-weight: var(--font-weight-bold);
  }

  &-padding {
    height: #{$menu-height};
  }
}

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