@import "../Tokens/tokens.scss";
@import "../../common/scss/helpers";

.dialog-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #00000049;
  animation: fadeIn linear 0.2s;
  z-index: 1000;
}

.dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  height: 100%;
  min-width: 200px;
  min-height: 100px;
  max-width: 100%;
  max-height: 100%;
  padding: 1rem;
  overflow: auto;
  border-radius: 10px;
  background-color: white;


  box-shadow: 0px 0.5px 5px -0.5px #1f1f1f;
}

.dialog-close-btn {
  @include reset-button();
  position: absolute;
  top: $baseUnit * 2;
  right: $baseUnit * 2;
  z-index: 1001;
}

.dialog-drag-area {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: $baseUnit * 4;
  cursor: move;
}

.dialog-no-select {
  user-select: none!important;
}

.dialog-resizeable {
  resize: both;
}

.dialog-title {
  font-weight: 500;
  font-size: x-large;
  margin-right: $baseUnit * 3;
}

.dialog-body {
  flex-grow: 1;
  overflow-y: auto;
  padding: 0.15rem 0; /* This fixes a HTML issue where text lineheight is not accounted for making the dialog overflow if you only have text */
}

.dialog-actions {
  display: flex;
  gap: $baseUnit;
  margin-top: auto;
  align-items: center;
}

@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}


.animation-shake {
  animation: shake 0.5s;
}

@keyframes shake {
  0% { transform: translate(0.5px, 0.5px) rotate(0deg); }
  10% { transform: translate(-0.5px, -0.5px) rotate(-0.5deg); }
  10% { transform: translate(-0.5px, 0px) rotate(0.5deg); }
  10% { transform: translate(0.5px, 0.5px) rotate(0deg); }
  40% { transform: translate(0.5px, -0.5px) rotate(0.5deg); }
  50% { transform: translate(-0.5px, 0.5px) rotate(-0.5deg); }
  60% { transform: translate(-0.5px, 0.5px) rotate(0deg); }
  70% { transform: translate(0.5px, 0.5px) rotate(-0.5deg); }
  80% { transform: translate(-0.5px, -0.5px) rotate(0.5deg); }
  90% { transform: translate(0.5px, 0.5px) rotate(0deg); }
  100% { transform: translate(0.5px, -0.5px) rotate(-0.5deg); }
}