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

.popup-boosts {
  $parent: ".popup";

  #{$parent} {
    &-container {
      padding: 0;
      width: 26.25rem;
      max-width: 26.25rem;

      max-height: unquote('min(100%, 43.5rem)');
      border-radius: $border-radius-huge;
    }

    &-header {
      height: 3.5rem;
      margin: 0;
      padding: 0 .5rem;
    }

    &-title {
      margin-left: .5rem;
    }
  }

  &-star {
    width: 140px;
    height: 128px;
    margin-left: -4px;
    margin-top: -2px;

    &-container {
      margin: 0 auto -4px;
      text-align: center;
      height: 132px;
    }
  }

  &-title,
  &-subtitle {
    text-align: center;

    @include text-overflow(false);
  }

  &-title {
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-20);
    margin-bottom: .5rem;
  }

  &-subtitle {
    padding: 0 2.5rem;
    line-height: var(--line-height-16);
    margin-bottom: 1rem;
  }

  &-type {
    padding-inline-start: 7.5625rem;

    .row-title {
      font-weight: var(--font-weight-bold);
    }

    .row-media {
      inset-inline-start: 3.5rem !important;
    }
  }

  &-specific {
    &-next {
      font-size: 1rem;
      margin-inline-start: 1px;
    }
  }

  &-badge {
    display: flex;
    align-items: center;
    height: 2rem;
    padding-inline: .5rem .75rem;
    border-radius: 2rem;
    background-color: rgba(var(--primary-color-rgb), #{$hover-alpha});
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-14);
    color: var(--primary-color);
    position: relative;
    pointer-events: none;

    &-icon {
      font-size: 1.125rem;
    }
  }

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

  &-button {
    display: flex !important;
    align-items: center;
    justify-content: center;

    &-badge {
      margin-inline-start: .625rem;
      background-color: #fff;
      padding-inline: .125rem .25rem;
      height: 1.125rem;
      border-radius: .25rem;
      display: flex;
      color: var(--primary-color);
      align-items: center;
      font-size: var(--font-size-14);
      font-weight: var(--font-weight-bold);

      &-icon {
        font-size: .8125rem;
      }
    }
  }

  &-additional-row {
    height: 3rem;
    padding: 0 1rem;
    display: flex;
    align-items: center;

    &-count {
      flex: 0 0 auto;
      width: 2.5rem;
    }

    &-input {
      flex: 1 1 auto;
    }
  }

  &-stars {
    &-row {
      .row-right {
        color: var(--secondary-text-color);
      }

      @include hover() {
        .stars-stacked {
          --star-background-color: var(--background-color);
        }
      }
    }

    &-amount {
      .stars-stacked {
        --star-background-color: var(--surface-color);
        --background-offset: 11px;
        display: inline-flex;
        vertical-align: middle;
        margin-inline-start: -.25rem;
      }
    }
  }

  .scrollable-y {
    border-top: none !important;
  }

  .sidebar-left-section {
    --link-color: var(--primary-color);
    box-shadow: none !important;
    margin-bottom: 0 !important;

    &:not(.no-delimiter) {
      border-top: 1px solid var(--border-color);
    }

    &-name-right {
      height: 0;
      margin-top: -3px;
      margin-right: -8px;
    }

    &-caption {
      font-size: var(--font-size-16);
      line-height: var(--line-height-16);
      margin-top: .75rem;
    }
  }

  .range-steps-selector {
    --option-width: .25rem;
    --option-height: .5rem;
    height: 5.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 3.6875rem;

    .progress-line {
      --height: 3px;
      --thumb-size: 1.5rem;
    }
  }

  .range-setting-selector-option {
    font-weight: var(--font-weight-bold);

    &-text {
      top: -2.625rem;
      font-size: var(--font-size-13);
    }

    &.is-chosen {
      color: var(--primary-color);
    }
  }

  .popup-gift-premium {
    &-options {
      margin: 0;
    }

    &-option {
      --primary-color: rgb(var(--primary-color-rgb)) !important;
    }
  }

  .is-flex {
    display: flex;
    align-items: center;
  }
}
