// Modal dialog styles
@mixin ae-modal-backdrop($zIndex: 9999, $bgColor: rgba(0, 0, 0, 0.5)) {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: $bgColor;
  z-index: $zIndex;
}
@mixin modal-content($max-width: 600px, $box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), $zIndex: 10000) {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  padding: 20px; /* Padding inside the modal */
  border-radius: 8px; /* Rounded corners */
  width: 90%; /* Responsive width */
  max-width: $max-width;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  z-index: $zIndex;
}
.ae-modal-backdrop {
  @include ae-modal-backdrop(9999, rgba(0, 0, 0, 0.5));
}
.ae-modal-title {
  font-size: 18px; /* Font size for the title */
  font-weight: 600; /* Bold font for emphasis */
  color: #333;
  margin: 0;
}
.ae-modal-content {
  @include modal-content(600px, 0 4px 10px rgba(0, 0, 0, 0.1), 10000);
}
.delete-popup-content {
  @include modal-content(400px, 0px 0px 50px 15px rgba(0, 0, 0, 0.2), 10010);
}
.delete-popup-backdrop {
  @include ae-modal-backdrop(10010, rgba(0, 0, 0, 0.2));
}


/* Button Styles */
button:disabled {
  background-color:#CCC;
  pointer-events: none;
  opacity: 0.75;
}

@mixin button-styles($backgroundColor: #007bff, $hoverColor: #0056b3, $focusColor: #0056b3, $shadowColor: 0 0 0 3px rgba(0, 123, 255, 0.5)) {
  background-color: $backgroundColor;
  transition: background-color 0.3s, box-shadow 0.3s;
  color: white; /* White text */
  border: none; /* No border */
  padding: 8px 16px; /* Padding inside the buttons */
  border-radius: 4px; /* Rounded corners */
  cursor: pointer;
  font-size: 14px;
  min-width: 90px;
  &:focus {
    background-color: $focusColor; /* Darker shade of blue */
    box-shadow: $shadowColor; /* Blue glow */
    outline: none; /* Remove default outline */
  }
  &:hover {
    background-color: $hoverColor;
  }
}


.ae-button {
  @include button-styles;
  &:last-child {
    margin-left: 10px;
  }
}


.save-button {
  @include button-styles($backgroundColor: #007bff, $hoverColor: #0056b3, $focusColor: #0056b3, $shadowColor: 0 0 0 3px rgba(0, 123, 255, 0.5))
}
.cancel-button {
  @include button-styles($backgroundColor: #9FA6B2, $hoverColor: #63676d, $focusColor: #6c757d, $shadowColor: 0 0 0 3px rgba(108, 117, 125, 0.6))
}
.delete-button {
  @include button-styles($backgroundColor: #dc3545, $hoverColor: #ff0000, $focusColor: #c82333, $shadowColor: 0 0 0 3px rgba(220, 53, 69, 0.5))
}