/* Styles for debug components */

.core-backend-404-warning {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  margin: 5px;
  padding: 10px 30px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  border-radius: 100px;
  background: #e64c4c;
  animation: 0.5s core-backend-404-warning-animation infinite;
}

@keyframes core-backend-404-warning-animation {
  0% {
    margin-left: 5px;
  }
  50% {
    margin-left: 20px;
  }
  100% {
    margin-left: 5px;
  }
}

.debug {
  display: none; /* ${(props: any) => (props.displayDebug ? 'block' : 'none')}; */
}

.showDebug .debug {
  display: block;
}

.debugBox {
  position: fixed;
  top: 50%;
  left: 0;
  z-index: 2147483641;
  width: 270px;
  padding: 20px 10px;
  font-size: 12px;
  border-radius: 0 5px 5px 0;
  color: #fff;
  background: #222528;
  transform: translateY(-50%);
  transition: 0.3s left;
}

.debugBox * {
  line-height: 1.4;
}

.debugBox code {
  margin-top: 3px;
  padding: 5px;
  font-size: 11px;
  white-space: unset;
  word-break: break-all;
  background: black;
}

.debugBox a {
  text-decoration: none;
  color: #119cd8;
}

.debugBox .toggleSidebar {
  position: absolute;
  right: -15px;
  bottom: 5px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #222528;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="rgb(255 255 255)"><path d="M8 5a1 1 0 100 2h5.586l-1.293 1.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L13.586 5H8zM12 15a1 1 0 100-2H6.414l1.293-1.293a1 1 0 10-1.414-1.414l-3 3a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L6.414 15H12z" /></svg>');
  background-position: center center;
  background-size: 16px 16px;
  background-repeat: no-repeat;
}

@media (max-width: 575px) {
  /* Hide on mobile devices for better testing */
  .debug,
  .debugBox {
    display: none !important;
  }
}

.reset-user-button {
  display: block;
  padding: 8px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  border-radius: 4px;
  background: #ef4444;
}