@import '../variables/default.scss';
@import '../mixins/index.scss';

$ink-curtain-btn-color: $ink-color-white !default;
$ink-curtain-btn-size: 56px !default;
$ink-curtain-bg-color: $ink-color-bg-mask !default;
$ink-curtain-zindex: $ink-zindex-999 !default;

.ink-curtain {
  display: block;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: $ink-curtain-bg-color;
  z-index: $ink-curtain-zindex;

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

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

  &__btn-close {
    display: flex;
    position: absolute;
    width: $ink-curtain-btn-size;
    height: $ink-curtain-btn-size;
    margin-left: -$ink-curtain-btn-size / 2;
    left: 50%;
    bottom: -($ink-curtain-btn-size + 24px);
    align-items: center;
    justify-content: center;
    border: 2px solid $ink-curtain-btn-color;
    border-radius: 50%;
    box-sizing: border-box;
    z-index: $ink-curtain-zindex;

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

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

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

    &--top {
      margin-left: -$ink-curtain-btn-size / 2;
      top: -($ink-curtain-btn-size + 24px);
      left: 50%;
      bottom: auto;
    }

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

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

    &--bottom {
      margin-left: -$ink-curtain-btn-size / 2;
      bottom: -($ink-curtain-btn-size + 24px);
      left: 50%;
    }

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

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