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

.popup-limit {
  .popup-container {
    min-width: unquote('min(100%, 22.5rem)');
  }

  &-line {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: .75rem 0;
  }

  &-hint {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    transform: scale(.6) translate(-280px, 16px) rotate(-30deg);

    @include animation-level(2) {
      transition: transform .3s cubic-bezier(.12,1.1,.56,1.2);
    }

    &.active {
      transform: scale(1) translate(0, 0) rotate(0);
    }

    &-icon {
      font-size: 1.25rem;
      margin-right: .25rem;
      display: flex;
    }
  }

  &-button {
    &.primary {
      background: linear-gradient(88.39deg, #6C93FF -2.56%, #976FFF 51.27%, #DF69D1 107.39%);
      color: #fff !important;
      display: flex;
      align-items: center;
    }

    &-icon {
      margin-left: .625rem;
      font-size: 1.5rem;
      display: flex;
    }
  }

  .limit-line {
    align-self: stretch;
    margin: 1rem .5rem 0;
  }

  &:not(.is-locked) &-hint {
    height: 2rem;
    border-radius: 1rem;
    padding: 0 .75rem;
    position: relative;
    background: linear-gradient(73.4deg, #6C93FF -7.21%, #976FFF 114.57%, #DF69D1 241.52%);
    background-size: 200px 2rem;

    &:after {
      display: block;
      content: " ";
      width: 100%; // 26
      height: 9px;
      position: absolute;
      bottom: -9px;
      clip-path: path("M0 0H26H24.4853C22.894 0 21.3679 0.632141 20.2426 1.75736L14.4142 7.58579C13.6332 8.36684 12.3668 8.36683 11.5858 7.58579L5.75736 1.75736C4.63214 0.632139 3.10602 0 1.51472 0H0Z");
      background: inherit;
      background-size: inherit;
      background-position-x: calc(-50% + -86px);
      background-repeat: no-repeat;
      left: 50%;
      margin-left: -13px;
    }
  }

  &.is-locked &-hint {
    height: 2.75rem;
    border-radius: 1.375rem;
    padding: 0 1.25rem 0 1rem;
    margin-right: -.25rem;
    background-color: var(--primary-color);
  }

  &.is-premium &-hint {
    align-self: flex-end;
    margin-right: .5rem;
    border-bottom-right-radius: 0;
    background: linear-gradient(84.4deg,#6c93ff -4.85%,#976fff 51.72%,#df69d1 110.7%);
    background-size: 200px 2rem;
    background-position-x: 100%;

    @include animation-level(2) {
      transition: transform .3s cubic-bezier(.12,1.1,.56,1.1);
    }

    &:after {
      height: 12px;
      left: 100%;
      bottom: -11.3px;
      margin-left: -20.6px;
      background-position-x: 134%;
      clip-path: path("M8.44528 0.5H20.5V10.1943C20.5 10.9154 19.9154 11.5 19.1943 11.5C18.8178 11.5 18.4597 11.3375 18.2117 11.0541L10.2274 1.92918C9.75146 1.38523 9.18812 0.924478 8.56057 0.565879L8.44528 0.5Z");
    }
  }
}
