/*
                      _       _
                      | |     | |
  _ __ ___   ___   __| | __ _| |
  | '_ ` _ \ / _ \ / _` |/ _` | |
  | | | | | | (_) | (_| | (_| | |
  |_| |_| |_|\___/ \__,_|\__,_|_|

  ReachUI Dialog
  https://reach.tech/dialog

*/

:root {
  --reach-dialog: 1; // required to avoid warning re: not using their CSS
}

[data-reach-dialog-overlay] {
  background: hsla(0, 0%, 0%, 0.33);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  /* custom */
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  z-index: 2;
}

[data-reach-dialog-content] {
  user-select: text;
  width: 50vw;
  // background: hsl(var(--bg-color, '0, 0%, 100%'));
  outline: none;
  // margin: 10vh auto;
  padding: 0;
}

@media (max-width: 1000px) {
  [data-reach-dialog-content] {
    width: 70vw;
  }
}
@media (max-width: 600px) {
  [data-reach-dialog-content] {
    width: 90vw;
  }
}

.xn-modal-overlay {
  &-active {
    transition: all var(--xn-duration, 1s) ease-out;
    // transition-duration: var(--xn-duration, 1s);
  }
  &-enter-from {
    opacity: 0 !important;
  }
  &-enter-to {
    opacity: 1 !important;
  }
  &-leave-from {
    // transition: all 1s cubic-bezier(1, 0.5, 0.8, 1);
    opacity: 1 !important;
  }
  &-leave-to {
    opacity: 0 !important;
  }
}

.xn-modal-content {
  &-active {
    transition: all var(--xn-duration, 1s) ease-out;
    // transition-duration: var(--xn-duration, 1s);
  }
  &-enter-from {
    transform: translateY(20px);
    // opacity: 0 !important;
  }
  &-enter-to {
    transform: translateY(0);
    // opacity: 1 !important;
  }
  &-leave-from {
    // transition: all 1s cubic-bezier(1, 0.5, 0.8, 1);
    transform: translateY(0);
    // opacity: 1 !important;
  }
  &-leave-to {
    transform: translateY(20px);
    // opacity: 0 !important;
  }
}