@import 'settings';

// Show elements with explicit breakpoints
@mixin vf-u-show {
  .u-show {
    display: initial !important;

    &--small {
      @media (width < $breakpoint-small) {
        display: inherit !important;
        display: initial !important;
      }
    }

    &--medium {
      @media ($breakpoint-small <= width < $breakpoint-large) {
        display: inherit !important;
        display: initial !important;
      }
    }

    &--large {
      @media ($breakpoint-large <= width) {
        display: inherit !important;
        display: initial !important;
      }
    }
  }
}