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

$ink-popup-bg-color: $ink-color-white !default;
$ink-popup-close-btn-color: $ink-color-grey-3 !default;
$ink-popup-zindex: $ink-zindex-999 !default;

.ink-popup {
  @include flex(0 0 auto);
  position: fixed;
  background-color: $ink-popup-bg-color;
  z-index: $ink-popup-zindex;
  max-height: 100%;
  overflow-y: auto;

  &__overlay {
    @include overlay(fixed);
    z-index: $ink-popup-zindex - 1;
  }

  &--center {
    left: 50%;
    top: 50%;
    width: 664px;
    transform: translate3d(-50%, -50%, 0);

    &.ink-popup--round {
      border-radius: $ink-border-radius-md;
    }
  }

  &--top {
    left: 0;
    top: 0;
    width: 100%;
    height: 30%;

    &.ink-popup--round {
      border-radius: 0 0 $ink-border-radius-lg $ink-border-radius-lg;
    }
  }

  &--right {
    right: 0;
    top: 0;
    width: 30%;
    height: 100%;

    &.ink-popup--round {
      border-radius: $ink-border-radius-lg 0 0 $ink-border-radius-lg;
    }
  }

  &--bottom {
    right: 0;
    bottom: 0;
    width: 100%;
    height: 30%;

    &.ink-popup--round {
      border-radius: $ink-border-radius-lg $ink-border-radius-lg 0 0;
    }
  }

  &--left {
    left: 0;
    top: 0;
    width: 30%;
    height: 100%;

    &.ink-popup--round {
      border-radius: 0 $ink-border-radius-lg $ink-border-radius-lg 0;
    }
  }

  &__btn-close {
    position: absolute;
    right: 16px;
    top: 16px;
    font-size: 40px;
    line-height: 1;
    color: $ink-popup-close-btn-color;
  }
}