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

$popup-footer-button-size: 44px;
$popup-footer-padding: .5rem;
$popup-footer-abitlarger-button-size: 48px;
$popup-footer-abitlarger-padding: 1rem;

.popup {
  --popup-min-width: auto;
  --popup-max-width: auto;
  --link-color: var(--primary-color);
  position: fixed!important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  // max-width: none;
  z-index: 4;
  background-color: rgba(0, 0, 0, .3);
  margin: 0;
  padding: 1.875rem;
  // box-shadow: none;
  opacity: 0;
  visibility: hidden;
  transition-property: opacity, visibility;
  transition-duration: var(--popup-transition-time), 0s;
  transition-delay: 0s, var(--popup-transition-time);
  transition-timing-function: var(--popup-transition-function);
  overflow: auto;
  display: flex;
  user-select: none;
  color: var(--primary-text-color);
  font-size: 1rem;

  &.no-overlay {
    padding: 0;
    background-color: transparent;
    overflow: visible;
  }

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

  &.active {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s, 0s;

    .popup-container {
      transform: translate3d(var(--translateX), 0, 0);
    }
  }

  &.hiding {
    .popup-container {
      transform: translate3d(var(--translateX), 0, 0);
    }
  }

  &-title {
    flex: 1;
    padding-inline: 0 1rem;
    margin: 0;
    font-size: var(--font-size-20);
    line-height: var(--line-height-20);
    font-weight: var(--font-weight-bold);
    @include text-overflow();
  }

  &-container {
    --translateX: 0;
    position: relative;
    /* max-width: 400px; */
    border-radius: $border-radius-medium;
    background-color: var(--surface-color);
    padding: 1rem;
    transform: translate3d(var(--translateX), 3rem, 0);
    backface-visibility: hidden;
    transition: transform var(--popup-transition-time) var(--popup-transition-function);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: auto;
    min-width: unquote('min(100%, var(--popup-min-width))');
    max-width: unquote('min(100%, var(--popup-max-width))');

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

  &-description {
    .peer-title {
      font-weight: var(--font-weight-bold);
    }

    &-framed {
      padding: .5rem 1rem;
      text-align: center;
      font-weight: var(--font-weight-bold);
      display: block;
      border-radius: $border-radius-big;
      background-color: var(--light-secondary-text-color);
    }

    &-danger {
      color: var(--danger-color);
      background-color: rgba(var(--danger-color-rgb), .1);
    }
  }

  &-centerer {
    margin: auto;
  }

  &-close {
    z-index: 3;
    justify-self: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    margin-inline-end: 1.5rem;
  }

  &-header {
    display: flex;
    margin-bottom: 2rem;
    align-items: center;
    flex: 0 0 auto;
    position: relative;

    &.is-floating {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      z-index: 4;

      .popup-title,
      .popup-header-background {
        opacity: 0;
        // visibility: hidden;

        @include animation-level(2) {
          transition: opacity var(--transition-standard-in)/* , visibility 0s */;
          // transition-delay: 0s, var(--transition-standard-in-time);
        }
      }

      &:not(.scrolled-start) {
        .popup-title,
        .popup-header-background {
          opacity: 1;
          // visibility: visible;
          // transition-delay: 0s, 0s !important;
        }
      }
    }

    &-background {
      position: absolute;
      inset: 0;
      background-color: var(--surface-color);
      border-bottom: 1px solid var(--border-color);
      z-index: -1;
    }

    .btn-icon {
      flex: 0 0 auto;
    }
  }

  &-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .scrollable {
      position: relative;
    }

    // .scrollable-y-bordered {
    //   &:last-child {
    //     margin-bottom: -1px;
    //     // border will blink if child is added
    //     // border-bottom: none;
    //   }
    // }
  }

  &-footer {
    flex: 0 0 auto;
    padding: #{$popup-footer-padding};
    text-align: center;

    .btn-primary {
      display: block;
      text-transform: uppercase;
      padding: 0 1.0625rem;
      height: #{$popup-footer-button-size};
      line-height: #{$popup-footer-button-size};
    }

    &.abitlarger {
      padding: #{$popup-footer-abitlarger-padding};

      .btn-primary {
        height: #{$popup-footer-abitlarger-button-size};
        line-height: #{$popup-footer-abitlarger-button-size};
      }
    }

    &-caption {
      display: block;
      color: var(--secondary-text-color);
      font-size: var(--font-size-13);
      line-height: var(--line-height-14);
      margin-top: .625rem;
    }
  }

  &-button {
    font-weight: var(--font-weight-bold);
    padding: 0 1rem;
    text-transform: uppercase;
    border-radius: $border-radius-medium;
    position: relative;
    max-width: 100%;
    height: 2.5rem;
    @include text-overflow();

    & + & {
      margin-inline-end: .625rem;
    }

    &.with-icon {
      display: flex;
      align-items: center;
    }

    &-icon {
      &.left {
        font-size: 1.25rem;
        margin-inline: -.1875rem .1875rem;
      }

      &.right {
        font-size: 1.5rem;
        margin-inline-start: .625rem;
      }
    }
  }

  &-buttons {
		display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    align-items: center;
    height: 3rem;
    padding: 0 .5rem;

    &.is-vertical-layout {
      flex-direction: column;
      height: auto;
      align-items: stretch;

      .popup-button {
        margin: 0 !important;
      }
    }
  }
}
