/**
 * CSP-compatible display classes
 * These classes are used instead of inline styles for showing/hiding elements
 */

/* Display classes */
.csp-hidden {
  display: none !important;
}

.csp-block {
  display: block !important;
}

.csp-inline {
  display: inline !important;
}

.csp-inline-block {
  display: inline-block !important;
}

.csp-flex {
  display: flex !important;
}

/* Visibility classes */
.csp-visible {
  visibility: visible !important;
}

.csp-invisible {
  visibility: hidden !important;
}

/* Opacity classes */
.csp-opacity-0 {
  opacity: 0 !important;
}

.csp-opacity-25 {
  opacity: 0.25 !important;
}

.csp-opacity-50 {
  opacity: 0.5 !important;
}

.csp-opacity-75 {
  opacity: 0.75 !important;
}

.csp-opacity-100 {
  opacity: 1 !important;
}

/* Animation classes */
.csp-fade-in {
  opacity: 0;
  display: block;
  transition: opacity 400ms ease;
}

.csp-fade-in.active {
  opacity: 1;
}

.csp-fade-out {
  opacity: 1;
  transition: opacity 400ms ease;
}

.csp-fade-out.active {
  opacity: 0;
}

.csp-slide-down {
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms ease;
  display: block;
}

.csp-slide-down.active {
  max-height: 2000px; /* Arbitrary large value */
}

.csp-slide-up {
  max-height: 2000px; /* Arbitrary large value */
  overflow: hidden;
  transition: max-height 400ms ease;
}

.csp-slide-up.active {
  max-height: 0;
}

/* Width utilities */
.w-auto {
  width: auto !important;
}

.w-100 {
  width: 100% !important;
}

.w-75 {
  width: 75% !important;
}

.w-50 {
  width: 50% !important;
}

.w-25 {
  width: 25% !important;
}

/* Height utilities */
.h-auto {
  height: auto !important;
}

.h-100 {
  height: 100% !important;
}

.h-75 {
  height: 75% !important;
}

.h-50 {
  height: 50% !important;
}

.h-25 {
  height: 25% !important;
}