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

.profile {
  &-avatars {
    &-container {
      width: 100%;
      padding-bottom: 100%;
      //height: 26.25rem;
      //overflow: hidden;
      position: relative;
      cursor: pointer;
      user-select: none;

      /* &:before, &:after {
        position: absolute;
        content: " ";
        height: 100%;
        width: 
      } */
      @include hover() {
        .profile-avatars-arrow {
          opacity: .2;
        }
      }

      &.is-single {
        .profile-avatars-arrow, 
        .profile-avatars-tabs {
          display: none;
        }
      }

      &.is-swiping {
        .profile-avatars-arrow {
          opacity: 0 !important;
        }
      }
    }
    
    &-avatars {
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: nowrap;
      transform: translateZ(-1px) scale(2);
      transform-origin: left top;
      transition: transform .2s ease-in-out;
      position: absolute;

      .scrollable.no-parallax & {
        transform: translate(0, 0);
      }

      &:before {
        content: " ";
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }
    }

    &-avatar {
      width: inherit;
      height: inherit;
      min-width: 100%;
      min-height: 100%;
      display: flex;
      background-color: #000;
      position: relative;

      .avatar-photo {
        width: 100%;
        height: 100%;
        object-fit: cover;
        pointer-events: none;
      }
    }

    &-gradient {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 80px;
      background: linear-gradient(360deg, rgba(0, 0, 0, .3) 8.98%, rgba(0, 0, 0, 0) 100%);
    }

    &-info {
      position: absolute;
      bottom: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      inset-inline-start: 1.5rem;
      bottom: .5625rem;
      pointer-events: none;

      .profile-name, 
      .profile-subtitle {
        color: #fff;
        margin: 0;
        text-align: start;
      }

      .peer-typing-container {
        --color: #fff;
      }

      .premium-icon {
        color: #fff;
      }

      .verified-icon {
        &-background {
          fill: #fff;
        }

        &-check {
          visibility: hidden;
        }
      }

      .profile-subtitle,
      .verified-icon,
      .premium-icon {
        opacity: .7;
      }

      .online {
        color: inherit !important;
      }
    }

    &-tabs {
      display: flex;
      position: absolute;
      top: .5rem;
      left: .375rem;
      right: .375rem;
      height: .125rem;
      pointer-events: none;
    }

    &-tab {
      flex: 1 1 auto;
      border-radius: 4px;
      margin: 0 .125rem;
      background-color: #fff;
      opacity: .2;
      transition: opacity .2s ease-in-out;
      //min-width: 1.6875rem;
      height: inherit;

      &.active {
        opacity: .6;
      }
    }

    &-arrow {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: calc(100% / 3);
      opacity: 0;

      &:before {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 2.1875rem;
        color: #fff;
        left: .625rem;
      }

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

      .profile-avatars-container:not(.is-swiping) & {
        @include hover() {
          opacity: 1 !important;
        }
      }

      /* &-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      } */

      &-next {
        left: auto;
        right: 0;
        
        &:before {
          left: auto;
          right: .625rem;
        }
      }
    }
  }

  &-content {
    /* flex: 1 1 auto; */
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    /* height: 100%; */
    position: relative;
    width: 100%;

    /* .checkbox-field {
      margin: 0;
      padding: 0;
      margin-left: -54px;
    }

    .checkbox-caption {
      padding-left: 54px;
    } */

    /* &-wrapper {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      padding-bottom: 13px;

      @include respond-to(not-handhelds) {
        padding-top: 15px;
      }
    } */

    .sidebar-left-section {
      position: relative;
      background-color: var(--surface-color);
      //padding-top: .5625rem;
      padding-bottom: .5rem;
      //margin-bottom: .75rem;
      //box-shadow: 0px 1px 5px -1px rgba(0, 0, 0, .16);

      .profile-subtitle {
        .peer-typing-container {
          justify-content: center;
        }
      }
    }

    /* .search-super {
      &:before {
        content: " ";
        height: 12px;
        width: 100%;
        background-color: var(--background-color-true);
        position: absolute;
        top: -12px;
      }
    } */

    &.search-empty {
      .gradient-delimiter {
        display: none;
      }
    }
  }

  &-button {
    @include respond-to(handhelds) {
      border-radius: 0;
    }
  }

  &-change-avatar {
    --size: 3.375rem;
    position: absolute !important;
    top: calc(var(--size) / -2);
    inset-inline-end: 1.25rem;
    transform: none;
    transition: none !important;
  }

  &-container {
    > .scrollable {
      display: flex;
      flex-direction: column;
      //transform: none;
    }
  }

  &-name {
    text-align: center;
    font-size: var(--font-size-20);
    line-height: var(--line-height-20);
    font-weight: var(--font-weight-bold);
	  overflow: hidden;
    max-width: 21.25rem;
    margin: 0 auto;
    color: var(--primary-text-color);
    display: flex;
    align-items: flex-end;

    span.emoji {
      vertical-align: inherit;
      min-width: min-content;
    }

    .peer-title {
      @include text-overflow(false);
    }

    // .verified-icon {
    //   margin-bottom: 3px;
    // }

    .sidebar-left-section-content > & {
      justify-content: center;
    }

    .badge-fake {
      align-self: center;
    }
  }

  &-subtitle {
    text-align: center;
    color: var(--secondary-text-color);
    font-size: .875rem;
    margin-bottom: .875rem;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;

    @include respond-to(handhelds) {
      margin-top: 3px;
    }

    .online {
      color: var(--primary-color);
    }
  }

  &-avatar {
    margin: .5rem auto 10px;
    display: block;
    //flex: 0 0 auto;

    @include respond-to(handhelds) {
      margin: 0 auto 10px;
      --size: 100px;
      --multiplier: .54;
    }
  }

  &-name, 
  &-subtitle, 
  &-avatar {
    flex: 0 0 auto;
  }
}
