// sass-lint:disable no-important force-element-nesting

// classes to fix js issues
.vl-u-mobile-no-equal-height {
  @include respond-to(small) {
    min-height: 0 !important;
  }
}

// JS utilities
//
// This describes some of the JS utilities that can be used during development.
// Styleguide js-utilities
.js-vl-clamp-useless {
  display: none !important;
}

.js .js-vl-show-checked {
  display: none;

  &--open {
    display: block;
  }
}

// js-col-float-right
.js.vl-flexbox .js-vl-col-float-right {
  // margin-bottom: -100%;
  position: absolute;
  z-index: 1;
  padding-bottom: $vl-spacing-medium;
  right: 0;

  @include respond-to(small) {
    position: static;
    padding-bottom: 0;
    margin-top: $vl-spacing-small;
  }
}

.js-vl-col-float-right--pushed {
  @include respond-to(small) {
    margin-top: 0 !important;
  }
}

// Show on select functionality data-attributes styling
[data-vl-show-on-select-content] {
  display: none;

  &[data-vl-show="true"] {
    display: block;
  }
}