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

@mixin sidebar-transform($centered: false, $transform: true) {
	@include respond-to(medium-screens) {
		transition: transform var(--transition-standard-out);

		body.is-right-column-shown & {
      @if $transform {
        @if $centered {
          transform: translate3d(calc(var(--right-column-width) * -.5), 0, 0);
        } @else {
          transform: translate3d(calc(var(--right-column-width) * -1), 0, 0);
        }
      }

			transition: transform var(--transition-standard-in);
		}

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

		@content;
	}
}

body.is-calling {
  .topbar {
    &, 
    &-call-container {
      transform: translateY(0);
    }
  }

  &.animation-level-2 {
    .topbar {
      &,
      &-call-container {
        transition: transform var(--transition-standard-out);
      }
    }
  }

  &:not(.backwards) {
    .topbar {
      &, 
      &-call-container {
        transform: translateY(var(--topbar-call-height));
      }
    }

    &:not(.animating) {
      --topbar-floating-call-height: var(--topbar-call-height);
    }
  }
}

body.is-right-column-shown {
  @include respond-to(medium-screens) {
    --topbar-floating-scaleX: calc(1 - var(--right-column-proportion));
  }
}

.topbar {
  --topbar-height: 3.5rem;
  
  --pinned-floating-audio-height: 0px;
  --pinned-floating-message-height: 0px;
	--pinned-floating-height: calc(var(--pinned-floating-audio-height) + var(--pinned-floating-message-height) + var(--topbar-floating-call-height));
  
	--pinned-audio-height: 52px;
	--pinned-message-height: 52px;

	width: 100%;
	z-index: 1;
	min-height: var(--topbar-height) !important;
	max-height: var(--topbar-height) !important;
	margin-bottom: var(--pinned-floating-height);
	position: relative;
	cursor: pointer !important;

	&:before {
		content: " ";
		position: absolute;
		height: calc(var(--topbar-height) + var(--pinned-floating-height) - var(--topbar-floating-call-height));
		top: 0;
		right: 0;
		left: 0;
		box-shadow: 0px 1px 5px -1px rgba(0, 0, 0, .21);
		pointer-events: none;
	}

	&.is-pinned-audio-floating {
		--pinned-floating-audio-height: var(--pinned-audio-height);
	}

	&.is-pinned-message-floating {
		--pinned-floating-message-height: var(--pinned-message-height);
	}

	&:not(.is-pinned-message-floating) {
		.chat-utils {
			position: relative;
			z-index: 1;
		}
	}

	&.is-pinned-audio-floating.is-pinned-message-floating {
		.pinned-message {
			top: calc(var(--topbar-height) + var(--pinned-audio-height));

			&:before {
				border-top: none;
			}

			/* &:before {
				box-shadow: none;
			} */
		}
	}

	@include respond-to(not-handhelds) {
		.menu-search {
			display: none;
		}

		&.is-pinned-message-shown:not(.hide-pinned) {
			.pinned-message {
				display: flex;
			}
		}
	}

	@include respond-to(no-floating-left-sidebar) {
		.chat:first-child & {
			.sidebar-close-button {
				display: none;
			}

			.chat-info {
				padding-inline-start: .1875rem;
			}
		}
	}

	.pinned-container-wrapper-utils {
		@include sidebar-transform();
	}

	.sidebar-close-button {
		position: absolute;
	}

	/* @include respond-to(wide-screens) {
		transition: .2s ease-in-out;
		align-self: start;

		body.is-right-column-shown & {
			width: calc(100% - (#{$large-screen} / 4));
		}

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

	/* @include respond-to(handhelds) {
		position: sticky;
		top: 0;
		z-index: 3;
	} */

	.user-title {
		font-size: 1rem;
		line-height: 1.5rem;
		max-width: calc(100% - 1.5rem);
		display: flex;
		align-items: center;
    font-weight: var(--font-weight-bold);
	
		span.emoji {
			vertical-align: inherit;
		}
	}
	
	.peer-title, 
	.info {
		@include text-overflow();
		line-height: var(--line-height);
	}

	.info:not(:empty) {
		margin-top: 1px;
	}

	.btn-menu-toggle {
		.btn-menu {
			top: calc(100% + 7px);
			max-height: calc(100 * var(--vh) - 4.375rem);
			
			@include respond-to(handhelds) {
				max-height: calc(100 * var(--vh) - 3.75rem);
				top: 29px;
			}
		}
		
		@include respond-to(handhelds) {
			margin-left: 0;
		}
	}
	
	.chat-info {
		flex: 1 1 auto;
		overflow: hidden;
		padding-inline-start: 49px;
		//--utils-width: NaN;

		@include respond-to(handhelds) {
			padding-inline-start: 52px;
    }
		
		//&.have-utils-width {
			max-width: calc(100% - var(--utils-width));

			@include respond-to(medium-screens) {
				body.is-right-column-shown & {
					max-width: calc(100% - var(--right-column-width) - var(--utils-width));
				}
			}
		//}

    &-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 3.5rem;
      max-height: 3.5rem;
      flex: 1 1 auto;
      max-width: 100%;
    }
	}

	.chat-utils {
		display: flex;
		align-items: center;
		flex: 0 0 auto;

		/* position: absolute;
    right: 0px;
    padding-right: inherit; */

		@include sidebar-transform();

		@include respond-to(handhelds) {
			> .btn-icon:not(.btn-menu-toggle) {
				display: none;
			}
		}
	}

	.chat-join {
		width: auto;
		height: 2.25rem;
		font-weight: 400;
		font-size: 0.875rem;
		margin-inline-end: .5rem;
		padding: 0 1.375rem; // same as in new media popup

		&:not(.hide) + .chat-mute-button {
			display: none;
		}
	}
	
	.content {
		flex: 1 1 auto;
		padding-inline-start: 1.125rem;
		max-width: 100%;
		overflow: hidden;
	}
	
	.person {
		display: flex;
		align-items: center;

		&-avatar {
			flex: 0 0 auto;
		}

		.bottom {
			font-size: .875rem;
			//line-height: 18px;
			color: var(--secondary-text-color);
			
			.online {
				color: var(--primary-color);
			}
		}
	}

	&.hide-pinned {
    --pinned-floating-height: 0px;

    .pinned-container {
      display: none;
    }

    & + .bubbles {
      .bubbles-inner {
        margin-bottom: .25rem;
      }
    }
  }

	.chat:not([data-type="chat"]) & {
		.content {
			padding-inline-start: 16px;
		}

		/* .user-title {
			font-size: 20px;
		}

		.sidebar-close-button:before {
			margin-top: 1px;
		} */
	}

  &-call {
    &-container {
      height: var(--topbar-call-height) !important;
      min-height: auto !important;
      position: absolute;
      top: calc(var(--topbar-call-height) * -1);
      inset-inline: 1px 0; // because I have border-right on left sidebar that "pushes" the chat
      color: #fff;
      z-index: 2;
      cursor: pointer !important;

      body:not(.has-chat) & {
        background: none !important;
      }

      @include respond-to(until-floating-left-sidebar) {
        inset-inline-start: 0;
      }

      .btn-icon {
        color: inherit;
        width: 2.5rem;
        height: 2.5rem;
        padding: 0;
        flex: 0 0 auto;
      }

      .peer-title {
        font-weight: var(--font-weight-bold);
        white-space: nowrap;
      }

      &:not(.is-call) {
        @media only screen and (max-width: 480px) {
          .topbar-call-left,
          .topbar-call-right {
            width: auto;
          }
  
          .group-call-description {
            display: none;
          }
        }
      }

      &.is-call {
        @media only screen and (max-width: 480px) {
          .topbar-call-left,
          .topbar-call-right {
            width: 6.25rem;
          }

          .call-description:not(.has-duration) {
            display: none;
          }
        }
      }
    }

    &-left, 
    &-right {
      flex: 0 0 auto;
      width: 12rem;
    }

    &-left {
      display: flex;
      align-items: center;

      .btn-icon {
        margin-inline-end: .375rem;
      }

      .call-description {
        white-space: nowrap;
      }

      .call-description-duration {
        font-weight: var(--font-weight-bold);
      }
    }

    &-center {
      @include sidebar-transform(true);
      @include text-overflow();

      @include respond-to(medium-screens) {
        // ! it flicks over the left side :(
        // body.is-right-column-shown & {
          padding: 0 calc(var(--right-column-width) / 2);
        // }
      }
    }

    &-right {
      @include sidebar-transform();
      display: flex;
      justify-content: flex-end;
    }

    &-weave {
      position: absolute;
      top: 0;
      right: 0;
      bottom: -1.125rem;
      left: 0;
      z-index: -1;
      transform: scale(var(--topbar-floating-scaleX), -1);
      transform-origin: left center;
      pointer-events: none;

      .is-rtl & {
        transform-origin: right center;
      }

      @include sidebar-transform(false, false);

      &-canvas {
        width: 100%;
        height: 100%;
      }
    }
  }

  .back-unread-badge {
    position: absolute;
    top: -.25rem;
    right: -.5rem;

    @include respond-to(not-handhelds) {
      display: none;
    }
  }
}
