@use "../../variables/index" as *;

/**
 * Overflow Utility Classes
 *
 * Note: Uses $screen-* tokens for responsive breakpoints.
 *
 * Intentionally hardcoded values:
 * - None - uses CSS overflow keywords only (visible, hidden, auto)
 */

.overflow-visible {
  overflow: visible !important;
}
.overflow-hidden {
  overflow: hidden !important;
}
.overflow-auto {
  overflow: auto !important;
}

//media queries
@media (max-width: $screen-xs-max) {
  .overflow-visible-xs {
    overflow: visible !important;
  }
  .overflow-hidden-xs {
    overflow: hidden !important;
  }
  .overflow-auto-xs {
    overflow: auto !important;
  }
}

@media (min-width: $screen-sm-min) {
  .overflow-visible-sm {
    overflow: visible !important;
  }
  .overflow-hidden-sm {
    overflow: hidden !important;
  }
  .overflow-auto-sm {
    overflow: auto !important;
  }
}

@media (min-width: $screen-md-min) {
  .overflow-visible-md {
    overflow: visible !important;
  }
  .overflow-hidden-md {
    overflow: hidden !important;
  }
  .overflow-auto-md {
    overflow: auto !important;
  }
}

@media (min-width: $screen-lg-min) {
  .overflow-visible-lg {
    overflow: visible !important;
  }
  .overflow-hidden-lg {
    overflow: hidden !important;
  }
  .overflow-auto-lg {
    overflow: auto !important;
  }
}