@import '../../common/style/smoba/layout.scss';
@import '../../common/style/smoba/animate.scss';

.press-popup {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--window-top, 0);
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 99;

  /* #ifdef MP-ALIPAY */
  touch-action: none;

  /* #endif */


  &__vert {
    .press-popup__left {
      left: 0;
    }
  }

  &__hor {
    justify-content: flex-end;
    align-items: stretch;

    .press-popup--content {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
  }

  &__hor:not(.press-popup--white) {
    .press-popup--content {
      background: rgba(18, 18, 31, .95);
    }

    .press-popup--title {
      color: $color-white;
    }

    .press-popup__left {
      right: 0;
      left: auto;
      color: $color-gray-4;
    }
  }

  &--mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .5);
  }

  &--content {
    position: relative;
    width: 100%;
    border-top-left-radius: .3rem;
    border-top-right-radius: .3rem;
    background-color: #fff;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    overflow: hidden;
  }


  &--title-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: tovmin(116);
    padding-bottom: tovmin(24);
    box-sizing: border-box;

    &::after {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      margin: 0 auto;
      content: '';
      width: tovmin(686);
      height: tovmin(24);
      background: url(https://image-1251917893.file.myqcloud.com/Esports/new/user/popup-line.png) no-repeat center;
      background-size: contain;
    }
  }

  &--title-line {
    position: relative;
    width: 100%;
    height: tovmin(24);

    &::before {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      content: '';
      width: tovmin(64);
      height: tovmin(8);
      border-radius: tovmin(8);
      background: $color-gray-2;
    }

    &::after {
      position: absolute;
      left: 0;
      right: 0;
      top: tovmin(6);
      height: tovmin(16);
      content: '';
    }
  }

  &--title {
    font-size: tovmin(32);
    color: $color-black;
    line-height: tovmin(48);
  }

  &__left {
    position: absolute;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: tovmin(104);
    height: tovmin(92);
    font-size: tovmin(40);
  }

  &--close,
  &--arrow {
    font-size: inherit;
    color: $color-black;
  }

  // 改为press-button
  &--title-btn-wrap {
    position: absolute;
    right: tovmin(40);
    height: tovmin(52);
    line-height: tovmin(44);
    font-size: tovmin(28);
    display: flex;
    align-items: center;

    ::v-deep press-button {
      height: 100%;
    }
  }
}