.acadlix-front-quiz-button {
  height: 32px;
  width: 93px;
  display: block;
  background-color: rgba(0, 0, 0, 0.11);
  border-radius: 4px;
  animation: 2s ease-in-out 0.5s infinite normal none running animation-c7515d;
}

@keyframes animation-c7515d {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }

  100% {
    opacity: 1;
  }
}

.acadlix-front-quiz-button:hover {
  background-color: #f1f1f1;
}

.acadlix-front-quiz-button:active {
  background-color: #ddd;
}

.acadlix-hide {
  display: none !important;
}

/* Server-side Skeleton Container matching MUI Card */
.acadlix-server-skeleton {
  max-width: 650px;
  /* MUI m: 2 */
  border-radius: 8px;
  /* MUI borderRadius: 2 */
  box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  /* MUI elevation 3 */
  background-color: #fff;
  padding: 16px;
  /* MUI p: 3 */
  box-sizing: border-box;
}

/* Base animation for all skeleton items */
.acadlix-skel-anim {
  background-color: rgba(0, 0, 0, 0.11);
  animation: 2s ease-in-out 0.5s infinite normal none running acadlix-pulse-fade;
}

/* Specific elements */
.acadlix-skel-title {
  width: 50%;
  height: 24px;
  margin-bottom: 12px;
  border-radius: 4px;
}

.acadlix-skel-btn {
  width: 100%;
  height: 32px;
  border-radius: 4px;
  margin-top: 12px;
}

.acadlix-skel-icon {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Grid System matching MUI Grid */
.acadlix-skel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.acadlix-skel-grid-item {
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.acadlix-skel-border-right {
  border-right: 1px solid #e0e0e0;
}

.acadlix-skel-border-bottom {
  border-bottom: 1px solid #e0e0e0;
}

/* Text Blocks */
.acadlix-skel-content {
  flex-grow: 1;
}

.acadlix-skel-text-main {
  height: 16px;
  margin-bottom: 8px;
  border-radius: 4px;
}

.acadlix-skel-text-sub {
  height: 16px;
  border-radius: 4px;
}

/* Responsive break for mobile grids */
@media (max-width: 600px) {
  .acadlix-skel-grid {
    grid-template-columns: 1fr;
  }

  .acadlix-skel-border-right {
    border-right: none;
  }

  .acadlix-skel-grid-item:not(:last-child) {
    border-bottom: 1px solid #e0e0e0;
  }
}