// Variables
$modal-bg: rgba(0, 0, 0, 0.3);
$modal-blur: 8px;
$modal-z-index: 999999;
$modal-content-z-index: 50000;
$modal-content-bg: #fff;
$modal-content-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);

// Modal background with blur effect
.modal {
  display: none; // Hidden by default
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: $modal-bg; // Semi-transparent dark background
  backdrop-filter: blur($modal-blur); // Blurs everything behind the modal
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: $modal-z-index; // Ensure it stays on top
}

// Modal content
.modal-content {
  background-color: $modal-content-bg;
  padding: 20px;
  border-radius: 5px;
  box-shadow: $modal-content-shadow;
  width: 90%; /* Sæt bredden til 80% af skærmens bredde */
  height: 90%;
  // max-width: 1200px; /* Tilføj en maks-bredde for store skærme */
  text-align: center;
  z-index: $modal-content-z-index; /* Content stays above the blurred overlay */
  margin: 10% auto; /* Centrer modalen horisontalt og tilføj vertikal afstand */
}

// Rotating buttons
.open {
  padding: -20px;
  margin: -10% auto; /* Centrer modalen horisontalt og tilføj vertikal afstand */

  transform: rotate(15deg); // Rotates button 15 degrees clockwise
}

.open_inv {
  padding: -20px;
  margin: -10% auto; /* Centrer modalen horisontalt og tilføj vertikal afstand */

  transform: rotate(-15deg); // Rotates button 15 degrees counterclockwise
}