@import '../colors';
@import '../Icon/variables';
@import '../mixins';
@import '../variables';

$dialog-easing-linear: cubic-bezier(0.17, 0.67, 0.69, 0.97);
$dialog-popup-radius: 12px;
$dialog-popup-expand-top-space: 38px;

html[class^='disable-bounce'],
html[class^='disable-bounce'] > body {
  overflow: hidden;
  overscroll-behavior-y: none;
}

.tix-dialog.v4 {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  z-index: 1000;
  animation: bg-fade-in 0.3s linear both;

  @at-root {
    .closing#{&} {
      animation: bg-fade-out 0.3s linear both;
    }
  }

  .dialog-wrapper {
    bottom: 0px;
    left: 0px;
    position: fixed;
    right: 0px;
    top: 0px;
    z-index: 1000;
    transform: translateY(100%);
    animation: dialog-animation-show-bounce-y 700ms linear both;

    @at-root {
      .closing#{&} {
        animation: animation-hide-y 1s linear both;
      }
    }

    .dialog-close-handle {
      position: absolute;
      left: 0px;
      right: 0px;
      top: 0px;
      bottom: 0px;
    }

    .dialog-mask-bounce-bottom {
      position: absolute;
      background-color: $color-N0;
      top: 100%;
      left: 0px;
      right: 0px;
      height: 100vh;
    }

    .dialog-popup {
      position: absolute;
      background-color: $color-N0;
      border-radius: $dialog-popup-radius $dialog-popup-radius 0 0;
      bottom: 0px;
      left: 0px;
      right: 0px;
      box-sizing: border-box;
      overflow-y: auto;
      overscroll-behavior-y: none;
      overflow-x: hidden;
      border-bottom: solid 12px $color-N0;
      clip-path: inset(0 round $dialog-popup-radius $dialog-popup-radius 0 0);
      max-height: calc(100% - #{$dialog-popup-expand-top-space});
      padding-top: 24px;

      &::-webkit-scrollbar {
        display: none;
      }

      .dialog-content-body {
        padding: 0px 20px;
      }
    }
  }

  &.desktop {
    .dialog-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;

      .dialog-popup {
        max-width: 400px;
        width: 100%;
        bottom: initial;
        left: initial;
        right: initial;
        border-radius: $dialog-popup-radius;
        padding: 40px 0 24px;
        border-bottom: 0;

        .dialog-content-body {
          padding: 0 32px;
        }

        .dialog-icon-close-wrapper {
          position: absolute;
          top: 20px;
          right: 20px;
          cursor: pointer;
          padding: 0;
          border: 0;
          background: transparent;
        }
      }
    }
  }
}

@keyframes bg-fade-out {
  from {
    background-color: $blanket-bg-color;
  }
  to {
    background-color: transparent;
  }
}

@keyframes bg-fade-in {
  from {
    background-color: transparent;
  }
  to {
    background-color: $blanket-bg-color;
  }
}

@keyframes animation-hide-y {
  0% {
    transform: translateY(0%);
  }

  5.71% {
    transform: translateY(37.513%);
  }

  11.31% {
    transform: translateY(63.4581%);
  }

  17.02% {
    transform: translateY(80.0777%);
  }

  22.62% {
    transform: translateY(91.665%);
  }

  100% {
    transform: translateY(100%);
  }
}

@keyframes dialog-animation-show-bounce-y {
  0% {
    transform: translateY(100%);
  }

  5.71% {
    transform: translateY(62.4862%);
  }

  11.31% {
    transform: translateY(36.4581%);
  }

  17.02% {
    transform: translateY(19.0777%);
  }

  22.62% {
    transform: translateY(8.665%);
  }

  28.33% {
    transform: translateY(2.7139%);
  }

  33.93% {
    transform: translateY(-0.2147%);
  }

  45.15% {
    transform: translateY(-1.7093%);
  }

  72.57% {
    transform: translateY(-0.3869%);
  }

  100% {
    transform: translateY(0%);
  }
}