@use "../../styles/_variables" as *;

.WarningViewport {
  --viewport-padding: 25px;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  margin: auto !important;
  display: flex;
  flex-direction: column;
  padding: var(--viewport-padding);
  gap: 14px;
  max-width: 100vw;
  width: fit-content;
  list-style: none;
  z-index: 2147483647;
  outline: none;
  pointer-events: all !important;
}

.warning-root {
  background-color: $color-text-primary;
  color: $color-text-contrast;
  border-radius: $container-border-radius;
  box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
    hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
  padding: 14px 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  line-height: 1.5;
  max-width: 350px;
  overflow: hidden;
  align-items: center;
  text-align: left;
  align-items: flex-start;
}
.warning-content {
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}
.warning-root[data-state="open"] {
  animation: slideIn2 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.warning-root[data-state="closed"] {
  animation: hide 100ms ease-in;
}
.warning-root[data-swipe="move"] {
  transform: translateY(var(--radix-toast-swipe-move-y));
}
.warning-root[data-swipe="cancel"] {
  transform: translateY(0);
  transition: transform 200ms ease-out;
}
.warning-root[data-swipe="end"] {
  animation: swipeOut2 100ms ease-out;
}

@keyframes hide {
  from {
    opacity: 1;
  }
  to {
    opacity: 0 !important;
  }
}

@keyframes slideIn2 {
  from {
    transform: translateY(calc(-100% - var(--viewport-padding)));
  }
  to {
    transform: translateY(0);
  }
}

@keyframes swipeOut2 {
  from {
    transform: translateY(var(--radix-toast-swipe-end-y));
  }
  to {
    transform: translateY(calc(-100% - var(--viewport-padding)));
  }
}

.warning-title {
  color: $color-text-contrast;
  font-family: $font-medium;
}

.warning-description {
  color: $color-text-contrast;
  opacity: 0.8;
  font-family: $font-medium;
}

.ToastAction {
  color: $color-text-contrast;
  font-family: $font-medium;
  text-align: right;
  background-color: #51515f;
  padding: 0px 12px !important;
  height: 24px !important;
  cursor: pointer;
}
.warning-close {
  z-index: 999999;
}
.warning-close:hover {
  cursor: pointer;
}
