.responsive-overflow(@infix) {
  @media (min-width: ~"@{screen-@{infix}-min}") {
    .overflow-@{infix}-auto       { .overflow-auto; }
    .overflow-@{infix}-hidden     { .overflow-hidden; }
    .overflow-@{infix}-inherit    { .overflow-inherit; }
    .overflow-@{infix}-scroll     { .overflow-scroll; }
    .overflow-@{infix}-visible    { .overflow-visible; }

    .overflow-x-@{infix}-auto     { .overflow-x-auto; }
    .overflow-x-@{infix}-hidden   { .overflow-x-hidden; }
    .overflow-x-@{infix}-inherit  { .overflow-x-inherit; }
    .overflow-x-@{infix}-scroll   { .overflow-x-scroll; }
    .overflow-x-@{infix}-visible  { .overflow-x-visible; }

    .overflow-y-@{infix}-auto     { .overflow-y-auto; }
    .overflow-y-@{infix}-hidden   { .overflow-y-hidden; }
    .overflow-y-@{infix}-inherit  { .overflow-y-inherit; }
    .overflow-y-@{infix}-scroll   { .overflow-y-scroll; }
    .overflow-y-@{infix}-visible  { .overflow-y-visible; }
  }
}

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

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

.overflow-inherit {
  overflow: inherit !important;
}

.overflow-scroll {
  overflow: scroll !important;
}

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

.overflow-x-auto {
  overflow-x: auto !important;
}

.overflow-x-hidden {
  overflow-x: hidden !important;
}

.overflow-x-inherit {
  overflow-x: inherit !important;
}

.overflow-x-scroll {
  overflow-x: scroll !important;
}

.overflow-x-visible {
  overflow-x: visible !important;
}

.overflow-y-auto {
  overflow-y: auto !important;
}

.overflow-y-hidden {
  overflow-y: hidden !important;
}

.overflow-y-inherit {
  overflow-y: inherit !important;
}

.overflow-y-scroll {
  overflow-y: scroll !important;
}

.overflow-y-visible {
  overflow-y: visible !important;
}

.responsive-overflow(sm);
.responsive-overflow(md);
.responsive-overflow(lg);