@use "sass:math";
@import '../variables/default.scss';
@import '../mixins/index.scss';

$at-curtain-btn-size: 56px;

.at-curtain {
  /*  #ifndef  rn  */
  //  display: block;
  //  position: fixed;
  /*  #endif  */
  /*  #ifdef  rn  */
  position: absolute;
  /*  #endif  */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba($color: #000, $alpha: 0.3);
  z-index: $zindex-curtain;

  /* elements */
  &__container {
    display: flex;
    position: relative;
    margin: 0 auto;
    width: 80%;
    height: 100%;
    justify-content: center;
    align-items: center;
    /*  #ifndef  rn  */
    // box-sizing: border-box;
    /*  #endif  */
    opacity: 1;
  }

  &__body {
    position: relative;
    width: 100%;
  }

  &__btn-close {
    display: flex;
    position: absolute;
    width: $at-curtain-btn-size;
    height: $at-curtain-btn-size;
    margin-left: -1 * math.div($at-curtain-btn-size, 2);
    left: 50%;
    bottom: -($at-curtain-btn-size + 24px);
    align-items: center;
    justify-content: center;
    border: 2PX solid $at-curtain-btn-color;
    border-radius: math.div($at-curtain-btn-size, 2);
    /*  #ifndef  rn  */
    // box-sizing: border-box;
    /*  #endif  */
    z-index: $zindex-curtain;

    &__at-icon {
      color: $at-curtain-btn-color;
    }

    /*  #ifndef  rn  */
    // &::before,
    // &::after {
    //   content: '';
    //   position: absolute;
    //   top: 50%;
    //   left: 50%;
    //    display: inline-block;
    //   width: 34px;
    //   height: 2PX;
    //   border-radius: 1PX;
    //   background: $at-curtain-btn-color;
    // }

    // &::before {
    //   transform: translate3d(-50%, -50%, 0) rotate(45deg);
    // }

    // &::after {
    //   transform: translate3d(-50%, -50%, 0) rotate(-45deg);
    // }
    /*  #endif  */

    &--top {
      margin-left: -1 * math.div($at-curtain-btn-size, 2);
      top: -($at-curtain-btn-size + 24px);
      left: 50%;
      bottom: auto;
    }

    &--top-left {
      top: -($at-curtain-btn-size + 24px);
      left: 0;
      bottom: auto;
    }

    &--top-right {
      top: -($at-curtain-btn-size + 24px);
      left: auto;
      right: 0;
      bottom: auto;
    }

    &--bottom {
      margin-left: -1 * math.div($at-curtain-btn-size, 2);
      bottom: -($at-curtain-btn-size + 24px);
      left: 50%;
    }

    &--bottom-left {
      bottom: -($at-curtain-btn-size + 24px);
      left: 0;
    }

    &--bottom-right {
      bottom: -($at-curtain-btn-size + 24px);
      left: auto;
      right: 0;
    }
  }

  /* modifiers */
  &--closed {
    display: none;
    // visibility: hidden;
  }
}