hlfcoding/hlf-dom-extensions

/*
HLF Tip Extension
=================
[Source](../js/tip.html) | [Tests](../../tests/css/tip.html)

The main responsibility for the required extension styling is to provide core
layout styles but allow easy customization of skin styles, ie. colors, fonts,
borders, shadows.

The required DOM structure looks like:
```html
<div class="js-tips-tip">
  <div class="js-tips-inner">
    <div class="js-tips-stem"></div>
    <div class="js-tips-content">...</div>
  </div>
</div>
```

Example of the variations of classes on the tip element:
```html
<div class="js-tips js-snap-tip js-tips-follow js-tips-bottom js-tips-right js-tips-snap-trigger js-tips-snap-x-side">
```
*/

.js-tips-tip {
  --tip-em: 12px;
  --tip-fill-color: #666;
  --tip-text-color: #fff;
  --stem-size: var(--tip-em);
  --stem-size-wide-half: calc(var(--tip-em) * 1.5 / 2);
  --tip-max-width: calc(var(--tip-em) * 18);
  --tip-toggle-duration: 0.2s;
  --tip-z-index: 9999;

  left: 0;
  position: absolute;
  top: 0;

  opacity: 0;
  transition: opacity var(--tip-toggle-duration);

  z-index: var(--tip-z-index);
}

.js-tips-hidden {
  display: none;
}

.js-tips-visible {
  opacity: 1;

  display: block;
}

.js-tips-inner {
  position: relative;

  max-width: var(--tip-max-width);
}

.js-tips-stem {
  background: none;
  border: 0 solid transparent; /* Initial value. */
  height: 0; /* Initial value. */
  position: absolute;
  width: 0; /* Initial value. */
}
.js-tips-tip.js-tips-left .js-tips-stem,
.js-tips-tip.js-tips-left.js-tips-snap-y-side .js-tips-stem {
  border-left-width: var(--stem-size);
  left: auto;
  margin-bottom: auto; /* Reset. */
  margin-right: calc(var(--stem-size) * -1); /* Positioning. */
  margin-top: auto; /* Reset. */
  right: -1px; /* To match the JS. */

  border-color: transparent;
  border-left-color: var(--tip-fill-color);
}
.js-tips-tip.js-tips-right .js-tips-stem,
.js-tips-tip.js-tips-right.js-tips-snap-y-side .js-tips-stem {
  border-right-width: var(--stem-size);
  left: 0;
  margin-bottom: auto; /* Reset. */
  margin-left: calc(var(--stem-size) * -1); /* Positioning. */
  margin-top: auto; /* Reset. */
  right: auto;

  border-color: transparent;
  border-right-color: var(--tip-fill-color);
}
.js-tips-tip.js-tips-bottom .js-tips-stem,
.js-tips-tip.js-tips-bottom.js-tips-snap-x-side .js-tips-stem {
  border-bottom-width: var(--stem-size);
  bottom: auto;
  margin-left: auto; /* Reset. */
  margin-right: auto; /* Reset. */
  margin-top: calc(var(--stem-size) * -1); /* Positioning. */
  top: 0;

  border-color: transparent;
  border-bottom-color: var(--tip-fill-color);
}
.js-tips-tip.js-tips-top .js-tips-stem,
.js-tips-tip.js-tips-top.js-tips-snap-x-side .js-tips-stem {
  border-top-width: var(--stem-size);
  bottom: 0;
  margin-bottom: calc(var(--stem-size) * -1); /* Positioning. */
  margin-left: auto; /* Reset. */
  margin-right: auto; /* Reset. */
  top: auto;

  border-color: transparent;
  border-top-color: var(--tip-fill-color);
}
.js-tips-tip.js-tips-snap-x-side > .js-tips-inner > .js-tips-stem { /* Add specifity. */
  border-left-width: var(--stem-size-wide-half);
  border-right-width: var(--stem-size-wide-half);
  left: 50%;
  margin-left: calc(var(--stem-size-wide-half) * -1);
  margin-right: auto;
}
.js-tips-tip.js-tips-snap-y-side > .js-tips-inner > .js-tips-stem { /* Add specifity. */
  border-top-width: var(--stem-size-wide-half);
  border-bottom-width: var(--stem-size-wide-half);
  margin-bottom: auto;
  margin-top: calc(var(--stem-size-wide-half) * -1);
  top: 50%;
}

.js-tips-content {
  overflow: hidden;
  position: relative;

  padding-bottom: calc(var(--tip-em) * 5 / 6);
  padding-left: var(--tip-em);
  padding-right: var(--tip-em);
  padding-top: calc(var(--tip-em) * 2 / 3);

  background-color: var(--tip-fill-color);
  color: var(--tip-text-color);

  transition-duration: var(--tip-toggle-duration);
  transition-property: height, width;
  transition-timing-function: ease-in-out;
}