@use 'sass:math';
@import '../settings';

$small-bubble: 1.6rem;
$medium-bubble: 3rem;
$large-bubble: 5rem;

$rootPx: 16px;

@function remToPx($rem) {
  @return unitless-calc($rem) * $rootPx;
}

@function pxToRem($px) {
  @return math.div(unitless-calc($px), unitless-calc($rootPx)) + 0px;
}

@function bubbleFontSize($size) {
  @return $size * 0.25 + 0.3333333333;
}

/******************************************************************************\
 *                                                                            *
 * Visually hide any element (mostly text) accessibly.                        *
 * Support includes IE9+                                                      *
 * Source: https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html  *
 *                                                                            *
 ******************************************************************************/
.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}