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

.topbar-search {
  &-container {
    display: flex;
    position: absolute;
    align-items: center;
    inset-block: 0;
    // inset-inline-start: 7.3125rem;
    inset-inline-start: calc(var(--topbar-close-active-size) + var(--topbar-avatar-active-size) + var(--topbar-avatar-close-gap) + 1.8125rem);
    inset-inline-end: 1rem;
    gap: .5rem;
    z-index: 1;

    @include respond-to(handhelds) {
      inset-inline: .5rem;
      background-color: var(--surface-color);
    }

    @include respond-to(medium-screens) {
      transition: padding-inline-end var(--transition-standard-out);
  
      body.is-right-column-shown & {
        padding-inline-end: var(--right-column-width);
        transition: padding-inline-end var(--transition-standard-in);
      }
  
      body.animation-level-0 & {
        transition: none;
      }
    }
  }

  &-left {
    &-container {
      --border-radius: 21px;
      --height: 42px;
      flex: 1 1 auto;
      align-self: flex-start;
      margin-top: 7px;
      position: relative;
      max-width: 100%;
      width: 1px; // fix max-width
      // max-height: 313px;
      // height: var(--height);

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

    &-background {
      position: absolute;
      inset: 0;
      box-shadow: 0px 0px 10px 0px #00000000;
      // opacity: 0;
      border-radius: var(--border-radius);
      background-color: var(--old-input-background-color);

      @include animation-level(2) {
        transition: box-shadow var(--transition-standard-in), background-color var(--transition-standard-in);
      }

      .is-focused & {
        box-shadow: 0px 0px 10px 0px #00000040;
        background-color: var(--surface-color);
      }

      // @include respond-to(medium-screens) {
      //   transform-origin: var(--transform-origin-left-center);
      //   transform: scaleX(var(--topbar-floating-scaleX));
      //   transition: box-shadow var(--transition-standard-in), background-color var(--transition-standard-in), transform var(--transition-standard-out), border-radius var(--transition-standard-out);
    
      //   body.is-right-column-shown & {
      //     border-radius: calc(var(--border-radius) * (2 - var(--topbar-floating-scaleX)));
      //     transition: box-shadow var(--transition-standard-in), background-color var(--transition-standard-in), transform var(--transition-standard-in), border-radius var(--transition-standard-in);
      //   }
    
      //   body.animation-level-0 & {
      //     transition: none;
      //   }
      // }

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

    &-delimiter {
      height: 1px;
      margin: 0 .5rem .5rem;
      background-color: var(--border-color);
      border-radius: 1px;
      position: sticky;
      top: 0;
      z-index: 1;
    }

    &-chatlist {
      background: none;
      padding: 0 .5rem;
      position: absolute;
      border-radius: $border-radius-medium;

      .navigable-list {
        border-radius: inherit;
      }
    }

    &-collapsable {
      height: 0px;
      overflow: hidden;
      border-bottom-left-radius: 22px;
      border-bottom-right-radius: 22px;
      position: relative;

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

    &-results {
      max-height: 271px;
      max-width: 100%;

      &-padding {
        height: 8px;
      }

      &-empty {
        text-align: center;
        font-size: var(--font-size-16);
        color: var(--secondary-text-color);
        line-height: 25px;

        @include text-overflow(true);
      }
    }

    &-sender {
      border-radius: $border-radius-medium;
    }

    &-reactions {
      --margin-vertical: 0px;
      --margin-horizontal: .5625rem;
      // padding: .5rem 0 1rem;
      margin-top: calc(var(--margin-vertical) * -1);
      flex-wrap: nowrap;
      flex: 0 0 auto;
      // height: 70px;

      &-padding {
        width: 1rem;

        @include respond-to(handhelds) {
          width: .5rem;
        }
      }

      &-scrollable {
        position: relative;
        display: flex;
        align-items: center;
        height: 44px;
      }

      &-padding,
      .reaction-tag {
        flex: 0 0 auto;
      }
    }

    &-search-types {
      display: flex;
      gap: .5rem;

      .selector-user {
        margin: 0;

        &-avatar-close {
          display: none;
        }

        &.active {
          background-color: var(--primary-color) !important;
          color: #fff;
        }

        @include hover() {
          background-color: var(--light-primary-color);
        }
      }
    }
  }

  &-right {
    &-container {
      display: flex;
      align-items: center;
      position: relative;
      z-index: 1;
      flex: 0 0 auto;

      // @include sidebar-transform();
    }

    &-filter {
      width: 3rem;
      height: 2.5rem;
      opacity: 1;
      position: relative;
      // margin-inline-end: .5rem;

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

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

      &-button {
        position: absolute;
        inset-inline-end: .5rem;
      }
    }
  }

  &-input {
    border: none;
    background: none;
    padding-inline-start: var(--padding-horizontal-start);
    padding-inline-end: 136px;

    @include respond-to(handhelds) {
      padding-inline-end: 3.25rem;
    }

    @include animation-level(2) {
      transition: padding-inline-start .2s ease-in-out;
    }

    &-container {
      --icon-left-offset: 1rem;
      --border-width: 0px;
      --padding-horizontal: calc(var(--height) + 8px);
      --padding-horizontal-start: calc(var(--padding-horizontal) + var(--padding-placeholder, 0px) + var(--padding-sender, 0px));
      border-radius: var(--border-radius);
      margin: 0;

      .input-search-placeholder {
        inset-inline-start: calc(var(--padding-horizontal-start) + var(--padding-hashtag));

        @include animation-level(2) {
          transition: inset-inline-start .2s ease-in-out;
        }
      }

      .input-search-part {
        --max-opacity: .6 !important;
        color: var(--secondary-text-color) !important;
      }

      .input-search-clear {
        margin-inline-end: .4375rem;
      }

      .input-search-back {
        pointer-events: all;
      }

      .preloader-path-new {
        stroke: var(--secondary-text-color) !important;
        opacity: .6;
      }

      &.with-arrow-back {
        .preloader-container {
          inset-inline: auto var(--icon-left-offset);
        }
      }
    }

    &-from {
      position: absolute;
      inset-inline-start: var(--padding-horizontal);
      color: var(--primary-text-color);
      pointer-events: none;
      opacity: 0;

      @include animation-level(2) {
        transition: opacity .2s ease-in-out;
      }

      &.is-visible {
        opacity: 1;
      }
    }

    &-entity {
      position: absolute;
      inset-inline-start: calc(var(--padding-horizontal) + var(--padding-placeholder));
      margin: 0;
      // margin-inline-start: .25rem;
      pointer-events: all;
      z-index: 1;
    }

    &-arrow {
      margin: 0 !important;
    }

    &-tools {
      position: absolute;
      inset-inline-end: 0;
      height: var(--height);
      z-index: 1;
      display: flex;
      align-items: center;

      .input-search-part {
        position: relative;
      }
      // @include sidebar-transform();
    }
  }
}
