@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

.#{$namespace}-dialog-enter-active {
  transition: getCssVar(transition-ease);
  .#{$namespace}-dialog-original {
    &:not(.#{$namespace}-dialog--full-screen) {
      animation: rebound 0.43s;
    }
  }
}
.#{$namespace}-dialog-leave-active {
  transition: all 0.15s ease;
  .#{$namespace}-dialog-original {
    transition: all 0.15s ease;
  }
}
.#{$namespace}-dialog-enter-from,
.#{$namespace}-dialog-leave-to {
  opacity: 0;

  &.is-full-screen {
    .#{$namespace}-dialog-original {
      transform: translate(0, 8%) !important;
    }
  }
  .#{$namespace}-dialog-original {
    transform: scale(0.7);
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, getCssVar('shadow-opacity'));
  }
}

@keyframes rebound {
  0% {
    transform: scale(2);
  }
  40% {
    transform: scale(1.02);
  }
  80% {
    transform: scale(0.981);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes reboundClick {
  0% {
    transform: scale(0.99);
  }
  40% {
    transform: scale(1.02);
  }
  80% {
    transform: scale(0.981);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes loadingDialog {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

@include b(dialog) {
  background: rgba(0, 0, 0, getCssVar('background-opacity'));
  position: fixed;
  left: 0px;
  top: 0px;
  @include flex(center, flex-start);
  width: 100%;
  height: 100%;
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 80px;
  padding-bottom: 80px;

  @include when(full-screen) {
    padding: 0px;
    overflow: hidden;

    .#{$namespace}-dialog-original {
      width: calc(100% - 30px) !important;
      height: calc(100% - 30px) !important;
      max-width: none !important;
      max-height: none !important;
    }
  }

  @include when(blur) {
    backdrop-filter: saturate(180%) blur(15px);
  }

  &-original {
    background: getColor('background');
    color: getColor('text');
    position: relative;
    min-width: 400px;
    border-radius: getCssVar('radius');
    transition: getCssVar(transition-ease);
    box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, getCssVar('shadow-opacity'));
    max-width: 800px;
    margin: auto;
  }
  @include m(not-center) {
    @include e(header) {
      display: block;
    }
  }
  @include m(scroll) {
    @include e(content) {
      max-height: calc(80vh - 200px);
      overflow: auto;
    }
  }
  @include m(auto-width) {
    width: auto !important;
    min-width: auto !important;
    max-width: auto !important;
  }
  @include m(square) {
    border-radius: 0px;
    @include e(close) {
      border-radius: 0px;
    }
  }
  @include m(not-padding) {
    @include e(footer) {
      padding: 0px;
    }
    @include e(content) {
      padding: 0px;
      margin-bottom: 0px !important;
    }
    @include e(header) {
      padding: 0px;
    }
  }
  @include m(rebound) {
    animation: reboundClick 0.43s !important;
  }

  @include e(loading) {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    border-radius: inherit;
    background: getColor('background', 0.8);
    z-index: 100;
    @include flex(center, center);
  }
  @include e(footer) {
    padding: 10px 16px;
    padding-top: 0px;
  }
  @include e(header) {
    @include flex(center, center);
    padding: 10px 16px;
  }
  @include e(content) {
    padding: 10px 16px;
    width: 100%;
    position: relative;
    border-radius: inherit;
    &.notFooter {
      margin-bottom: 20px;
    }
  }
  @include e(close) {
    @include set-var-value(color, getCssVar(text));
    position: absolute;
    top: -6px;
    right: -6px;
    padding: 0px;
    margin: 0px;
    @include flex(center, center);
    background: inherit;
    border-radius: 12px;
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, getCssVar('shadow-opacity'));
    transition: getCssVar(transition-ease);
    z-index: 200;
    border: 0px;
    i {
      width: 34px;
      height: 34px;
      opacity: 0.7;
      &:after {
        width: 14px;
      }
      &:before {
        width: 14px;
      }
    }
    &:hover {
      box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, getCssVar('shadow-opacity'));
      transform: translate(-2px, 2px);
      i {
        opacity: 1;
      }
    }
  }
}

@media (max-width: 600px) {
  .#{$namespace}-dialog-original {
    min-width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    margin: auto 10px;
  }
}