/**
 * Ouput selectors and properties to vertically center elements inside their parent.
 * 
 * @param {string} $to-align (()) - The selector to match the elements which you wish to align vertically. The targeted elements should be inline or inline-block elements.
 * @param {string} $align (middle) - The vertical-align value, e.g. top, middle, bottom
 * @param {string} $pseudo-element (after) - Which pseudo element to use for the vertical align guide
 * 
 * @group util
 */
@mixin valo-vertical-align-guide ($to-align: (), $align: middle, $pseudo-element: after) {
  &:#{$pseudo-element} {
    content: "";
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
  }

  @if length($to-align) > 0 {
    @each $selector in $to-align {
      & > #{$selector} {
        vertical-align: $align;
      }
    }
  }
}


/**
 * Indicate that an element is clickable/tappable
 * 
 * @group util
 */
@mixin valo-tappable {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
  cursor: pointer;
}


/**
 * Output Vaadin Responsive extension specific width-range declaration.
 * 
 * @param {size} $min (0) - The lower bound for the width-range
 * @param {size} $max (null) - The upper bound for the width-range
 * 
 * @group util
 * 
 * @example scss
 * .v-ui {
 *   font-size: 18px;
 *   
 *   // Make the font-size smaller for 481px-768px wide UIs
 *   @include width-range(481px, 768px) {
 *     font-size: 16px;
 *   }
 *   
 *   // Make it even smaller for UIs narrower than 480px
 *   @include width-range($max: 480px) {
 *     font-size: 14px;
 *   }
 * }
 */
@mixin width-range($min: 0, $max: null) {
  &[width-range~="#{$min}-#{$max}"] {
    @content;
  }
}

/**
 * Output Vaadin Responsive extension specific height-range declaration.
 * 
 * @param {size} $min (0) - The lower bound for the height-range
 * @param {size} $max (null) - The upper bound for the height-range
 * 
 * @group util
 * 
 * @example scss
 * .v-csslayout {
 *   color: red;
 *   
 *   // Make the text color blue when the layout height is between 100px-300px
 *   @include height-range(100px, 300px) {
 *     color: blue;
 *   }
 * }
 */
@mixin height-range($min: 0, $max: null) {
  &[height-range~="#{$min}-#{$max}"] {
    @content;
  }
}