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

 .popup-stars {
  --popup-min-width: 26.25rem;
  --popup-max-width: 26.25rem;
  $parent: ".popup";

  #{$parent} {
    &-header {
      height: 3.5rem;
      padding-inline: .5rem;

      .stars-balance {
        margin-top: .25rem;
        margin-inline-end: .75rem;
      }
    }

    &-container {
      max-height: calc(100vh - 5rem);
      padding: 0;
      border-radius: 1rem;
    }

    &-body {
      background-color: var(--background-color);
    }

    &-close {
      margin-inline-end: 1rem;
    }

    &-title {
      overflow: unset;
    }
  }

  &-image {
    width: 194px;
    margin: 1.125rem auto .3125rem;
    display: block;
    transform: translateX(-3px); // * fix image alignment
  }

  &-title,
  &-subtitle {
    @include text-overflow(false);
    @include text-center();
  }

  &-title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    line-height: 2rem;
  }

  &-subtitle {
    line-height: 1.375rem;
    margin-top: .375rem;

    &.mt {
      margin-top: .5rem;
    }
  }

  &-options {
    // display: grid;
    // grid-template-columns: repeat(2, 1fr);
    // gap: .5rem;
    margin-top: 1.5rem;
    margin: 1.5rem .5rem .5rem;
    overflow: hidden;
    position: relative;

    @include respond-to(handhelds) {
      margin-left: 0;
      margin-right: 0;
    }

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

  &-option {
    --background-color: var(--light-filled-secondary-text-color);
    height: 79px;
    border-radius: $border-radius-medium;
    background-color: var(--background-color);
    cursor: pointer;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    width: calc(50% - .25rem);
    opacity: 1;

    // @include hover() {
    //   --background-color: #F1F3F5;
    // }

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

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

    &.full {
      width: 100%;
    }

    &-title {
      font-size: 1.5rem;
      font-weight: var(--font-weight-bold);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .125rem;
      height: 1.75rem;
    }

    &-subtitle {
      font-size: var(--font-size-14);
      line-height: var(--line-height-16);
      color: var(--secondary-text-color);
      height: 1.3125rem;
    }
  }

  &-more {
    font-weight: var(--font-weight-bold);
    justify-content: center;
    align-items: unset;
    height: 0rem;
    line-height: 3rem;

    &.is-visible {
      height: 3rem;
    }

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

    @include respond-to(not-handhelds) {
      margin: 0 .5rem !important;
      width: calc(100% - 1rem) !important;
    }

    .button-icon {
      margin-inline: .25rem 0;
      order: 1;
      line-height: inherit;
    }
  }

  &-transactions {
    &-section {
      .sidebar-left-section {
        padding: 0 !important;
      }

      .sidebar-left-section-content {
        margin: 0 !important;
      }
    }

    &-tab {
      border-radius: 0 !important;
    }

    &-content {
      padding: .5rem;

      // .row {
      //   &-media {
      //     top: .4375rem !important;
      //     inset-inline-start: .4375rem !important;
      //   }
      // }
    }
  }

  &-transaction {
    &-media {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      color: #fff;
      background: var(--premium-gradient);

      &.is-paid-media {
        border-radius: $border-radius-big;
        width: inherit !important;
        height: inherit !important;
        // outline: none;
        // background-color: unset;
      }
  
      &-counter {
        color: #fff;
        font-size: 1.5rem;
        font-weight: var(--font-weight-bold);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        text-shadow: 0px 0 3px rgba(0, 0, 0, 0.45);
      }
    }
  }

  &-cancelled {
    font-size: var(--font-size-13);
  }

  &-gift-avatar {
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
  }

  .media-photo {
    width: inherit;
    height: inherit;
    object-fit: cover;
    border-radius: inherit;
  }
}

.popup-stars-pay {
  $parent: ".popup";

  #{$parent} {
    &-header {
      margin-bottom: 0;
    }

    &-body {
      background-color: var(--surface-color);
      margin: -3.5rem 0 1rem;

      &.is-receipt {
        margin-bottom: 0;

        .popup-stars-pay-amount {
          display: flex;

          &.reverse {
            flex-direction: row-reverse;
          }

          &.inline {
            display: inline-flex;
          }
        }
      }

      .scrollable-y {
        border: none;
      }

      .scrollable-thumb-container {
        display: none;
      }
    }

    &-footer {
      .button-icon {
        font-size: 18.5px;
        vertical-align: bottom;
        line-height: inherit;
        margin-inline-start: .25rem;
      }
    }
  }

  &-images {
    position: absolute;
    top: 2.625rem;
    inset-inline: 0;
    display: flex;
    justify-content: center;
  }

  &-item {
    width: 90px !important;
    height: 90px !important;
    position: relative;
    border-radius: 50%;
    margin-right: -1.25rem;
    outline: 4px solid var(--surface-color);
    z-index: 1;
    background-color: var(--surface-color);
  }

  &-sticker {
    width: 128px;
    height: 128px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    margin-top: -1rem;
  }

  &-tos {
    color: var(--secondary-text-color);
    text-align: center;
    @include text-overflow(false);

    &2 {
      margin-top: 1.5rem;
    }
  }

  &-amount {
    font-weight: var(--font-weight-bold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: bottom;
    gap: .125rem;

    .currency-star-icon {
      width: 1.125rem;
      height: 1.125rem;
    }

    &-status {
      background-color: rgba(var(--green-color-rgb), .1);
      border-radius: $border-radius;
      padding: 0 .375rem;
    }
  }

  &-padding {
    padding: 0 1rem;
  }

  &-avatar {
    width: 90px;
    height: 90px;
    position: relative;
    
    .popup-stars-transaction-media {
      font-size: 3rem;
    }
  }

  &-boosts {
    display: inline-flex;
    align-items: center;
    background-color: var(--premium-color);
    border-radius: .75rem;
    height: 1.5rem;
    color: #fff;
    padding-inline: .25rem .5rem;
    font-size: var(--font-size-14);
    gap: .125rem;
  }

  .monospace-text {
    cursor: pointer;
  }

  .popup-stars-image {
    margin-top: 1.6875rem;
  }

  .popup-stars-transaction-media-counter {
    font-size: 2.5rem;
  }

  .popup-stars-pay-table {
    margin-block: 1.375rem 1rem;
  }
}

.popup-star-reaction {
  $parent: ".popup";

  #{$parent} {
    &-header {
      margin-bottom: -.25rem;
      z-index: 2;
    }

    &-body {
      background-color: var(--surface-color);
    }

    &-footer {
      .button-icon {
        font-size: 18.5px;
        vertical-align: bottom;
        line-height: inherit;
        margin-inline-start: .25rem;
      }
    }
  }

  .popup-stars-send-as {
    background: var(--limit-line-empty-background);
    padding: 0.25rem;
    padding-right: 0.5rem;
    border-radius: 1rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0.75rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    cursor: pointer;

    .tgico {
      font-size: 0.75rem;
    }

    .new-message-send-as-container {
      background: none!important;
      position: relative;
      width: 1.5rem;
      height: 1.5rem;
    }

    .new-message-send-as-close {
      display: none;
    }

    .new-message-send-as-avatar {
      --size: 1.5rem;

      position: absolute;
      transform: scale(0);
      opacity: 0;
      pointer-events: none;

      &.is-visible {
        &:not(.backwards) {
          transform: scale(1);
          opacity: 1;
        }

        &.animating {
          transition: transform var(--transition-standard-in), opacity var(--transition-standard-in);
        }
      }
    }

    .btn-menu {
      max-height: 20rem;
      max-width: 20rem;
      width: auto;
      height: auto;
      z-index: 4;

      &-item {
        height: 2.25rem;

        &-header {
          height: 1.875rem;
        }

        &-icon {
          margin-inline-end: calc(var(--icon-margin) - .5rem);
        }

        &-text {
          @include text-overflow();
          // font-size: .875rem !important;
          line-height: 1 !important;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }

        &-subtitle {
          font-size: .8125rem;
          font-weight: 400;
        }
      }
    }
  }

  &-senders {
    &-delimiter {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .625rem;
      padding: 0 1rem;
      margin-top: 1.625rem;
    }

    &-line {
      height: .5px;
      background-color: var(--border-color);
      flex: 1 1 auto;
    }

    &-text {
      height: 2.125rem;
      border-radius: 1.0625rem;
      color: #fff;
      font-size: var(--font-size-15);
      line-height: 2.125rem;
      padding: 0 1rem;
      background: linear-gradient(90deg, #FFAA00, #FFCD3A);
      flex: 0 0 auto;
      font-weight: var(--font-weight-bold);
      letter-spacing: -.4px;
    }

    &-list {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 3rem;
      margin-top: 1.375rem;
    }

    &-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      overflow: hidden;
      padding: 0.5rem 0.75rem;
      margin: -0.5rem -0.75rem;
      width: 5.25rem;

      &.is-clickable {
        cursor: pointer;
        border-radius: 0.75rem;

        &:hover {
          background-color: var(--light-secondary-text-color);
        }
      }

      &-anonymous {
        width: 60px;
        height: 60px;
        background-color: var(--secondary-color);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 43px;
        }
      }

      .peer-title {
        font-size: var(--font-size-11);
        max-width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }

    &-avatar-wrap {
      position: relative;
      pointer-events: none;
    }

    &-amount {
      position: absolute;
      bottom: -0.25rem;
      left: 50%;
      transform: translateX(calc(-50% + 1px));
      font-size: 0.75rem;
      line-height: 1;
      display: flex;
      align-items: center;
      padding: 0.125rem 0.313rem 0.125rem 0.25rem;
      gap: 0.125rem;
      background: linear-gradient(90deg, #FFAA00, #FFCD3A);
      border-radius: 999px;
      border: 0.125rem solid var(--surface-color);
      color: #fff;
      font-family: var(--font-rounded);
      font-variant-numeric: tabular-nums;
    }
  }

  &-checkbox {
    display: flex;
    justify-content: center;
    margin-top: 1rem;

    &-row {
      padding-inline-start: 3.5rem;
      border-radius: $border-radius-medium;
    }
  }

  .popup-stars-slider {
    margin: 4.25rem 1rem 1.75rem;
    position: relative;

    .sparkles-container {
      position: absolute;
      inset: 0;
      z-index: 2;
      overflow: hidden;
      border-radius: 1rem;
      color: #fff;
    }

    .progress-line {
      --height: 1.875rem;
      --thumb-size: 1.625rem;
      --focus-scale: 1;
      width: 100%;
      border-radius: 1rem;
      background-color: var(--limit-line-empty-background);
      z-index: 1;

      &__filled {
        border-radius: inherit;
        min-width: var(--height);
        background: linear-gradient(90deg, #FFAA00, #FFCD3A);
        width: calc(var(--progress) * 100% + var(--height) * (1 - var(--progress)));
        
        &:after {
          background-color: #fff;
          inset-inline-end: .9375rem;
          box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .1);
          z-index: 2;
        }
      }
    }

    &-hint {
      height: 3rem;
      position: absolute;
      left: var(--left);
      top: -4.1875rem;
      font-size: 1.5rem;
      padding: 0 .875rem 0 .625rem;
      background: linear-gradient(90deg, #FFAA00, #FFCD3A);
      border-radius: var(--border-radius);
      display: flex;
      align-items: center;
      gap: .375rem;
      z-index: 0;
      color: #fff;
      font-family: var(--font-rounded);
      font-variant-numeric: tabular-nums;

      .animated-counter {
        z-index: 2;
      }

      .animated-counter-decimal {
        overflow: hidden;
      }

      &-tail {
        content: '';
        position: absolute;
        transform: translateY(var(--translate-y));
        width: 100%;
        height: 100%;
        z-index: 0;
        background: linear-gradient(90deg, #FFAA00, #FFCD3A);
        background-size: 100px auto;
        background-position-x: calc(100px - var(--tail-left-relative) * 65px);
        clip-path: path("M0.5 0H44.5H36.9853C35.394 0 33.8679 0.632141 32.7426 1.75736L25.3284 9.17157C23.7663 10.7337 21.2337 10.7337 19.6716 9.17157L12.2574 1.75736C11.1321 0.632141 9.60602 0 8.01472 0H0.5Z");

        &-container {
          position: absolute;
          width: 46px;
          height: 12px;
          left: var(--tail-left);
          bottom: 38px;
        }
      }

      .tgico {
        font-size: 1.625rem;
      }

      .sparkles-container {
        position: absolute;
        inset: -0.25rem;
        z-index: 1;
        color: #ffe390;
        font-size: 0.5rem;
        overflow: visible;
      }
    }
  }

  .stars-balance {
    margin-left: auto;
  }
}
