/**
 * Extra rules that come in handy.
 *
 * @section Miscellaneous
*/

/**
 * Style scrollbars. Only works in Webkit-based browsers (Safari and Chrome).
 * On dark backgrounds, add the `scroll-styled--dark` modifier.
 *
 * **Use in combination with `overflow-auto`.**
 *
 * @memberof Miscellaneous
   @selectors .scroll-styled
 * @example
 * <div class="scroll-styled overflow-auto h120"><div class='h240'></div></div>
 * <div class="scroll-styled scroll-styled--dark bg-gray-dark overflow-auto h120"><div class='h240'></div></div>
*/
.scroll-styled::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background: transparent;
}
.scroll-styled::-webkit-scrollbar:hover {
  background: transparent;
}
.scroll-styled::-webkit-scrollbar-track {
  background: none;
}
.scroll-styled::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25);
  border-color: transparent;
  width: 6px;
  border-radius: 3px;
}
.scroll-styled::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.35);
}
.scroll-styled::-webkit-scrollbar-track:hover {
  background: transparent;
}
.scroll-styled--dark::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
}
.scroll-styled--dark::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4);
}

/**
 * Style a loading spinner.
 * On dark backgrounds, add the `loading--dark` modifier.
 * For a smaller spinner, add the `loading--s` modifier.
 * Use `color-*` classes to apply a custom color to the spinner handle.
 *
 * @group
 * @memberof Miscellaneous
 * @example
 * <div class="loading"></div>
 * <div class="loading loading--s"></div>
 * <div class="bg-gray-dark">
 *   <div class="loading loading--dark"></div>
 * </div>
 * <div class="bg-gray">
 *   <div class="loading color-lighten50"></div>
 * </div>
 */
.loading,
.loading--dark {
  display: block;
  height: 36px;
  width: 36px;
  border-radius: 50%;
  border: 3px solid var(--darken25);
  border-top-color: currentColor;
  animation: assembly-loading 0.8s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

.loading--dark {
  color: var(--white);
  border-left-color: var(--lighten25);
  border-right-color: var(--lighten25);
  border-bottom-color: var(--lighten25);
}

.loading--s {
  height: 18px;
  width: 18px;
}

/** @endgroup */

@keyframes assembly-loading {
  to {
    transform: rotate(360deg);
  }
}

/**
 * Disable touch and click events on an element and
 * its children. Be aware that this rule does not disable keyboard events,
 * so a user can still tab to an element and press Return to trigger
 * its click event.
 *
 * @memberof Miscellaneous
 * @example
 * <div class='btn events-none'>You can't click this</div>
 */
.events-none {
  -webkit-touch-callout: none;
  pointer-events: none;
}

@media (--m-screen) {
  .events-none-mm {
    -webkit-touch-callout: none !important;
    pointer-events: none !important;
  }
}

@media (--l-screen) {
  .events-none-ml {
    -webkit-touch-callout: none !important;
    pointer-events: none !important;
  }
}

/**
 * Enable touch and click events on an element and
 * its children. Use to re-enable such events inside a parent with the `events-none` class.
 *
 * @memberof Miscellaneous
 * @example
 * <div class='events-none'><div class='events-all'>You can click this.</div></div>
 */
.events-all {
  -webkit-touch-callout: default;
  pointer-events: all;
}

@media (--m-screen) {
  .events-all-mm {
    -webkit-touch-callout: default !important;
    pointer-events: all !important;
  }
}

@media (--l-screen) {
  .events-all-ml {
    -webkit-touch-callout: default !important;
    pointer-events: all !important;
  }
}

/**
 * Disable text selection on an element and its children. Use only in cases where accidental
 * text selection causes user frustration.
 *
 * @memberof Miscellaneous
 * @example
 * <div class='unselectable'>You can't select this.</div>
 */
.unselectable {
  user-select: none;
}

@media (--m-screen) {
  .unselectable-mm {
    user-select: none !important;
  }
}

@media (--l-screen) {
  .unselectable-ml {
    user-select: none !important;
  }
}

/**
 * Enable text selection on an element and its children.
 * Use to re-enable selection inside a parent with the `unselectable` class.
 *
 * @memberof Miscellaneous
 * @example
 * <div class='unselectable'><div class='selectable'>You can select this.</div></div>
 */
.selectable {
  user-select: text;
}

@media (--m-screen) {
  .selectable-mm {
    user-select: text !important;
  }
}

@media (--l-screen) {
  .selectable-ml {
    user-select: text !important;
  }
}

/**
 * Apply a subtle animated transition when changing CSS properties on an element. See MDN's [list of CSS animated properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties) for every property effected by this class.
 *
 * @memberof Miscellaneous
 * @example
 * <div class='bg-blue-on-hover transition'>Hover over me</div>
 */
.transition {
  transition: all var(--transition);
}

/**
 * Disable an animated transition on elements like [`btn`](#Buttons) that have default transitions.
 *
 * @memberof Miscellaneous
 * @example
 * <div class='btn transition-none'>transition-none</div>
 */
.transition-none {
  transition: auto;
}

/**
 * Always show scrollbars.
 *
 * @memberof Miscellaneous
 * @example
 *   <div class='overflow-scroll'>Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
 */
.overflow-scroll {
  overflow: scroll !important;
}

/**
 * Display scrollbars if content flows beyond the edge of the element.
 *
 * @memberof Miscellaneous
 * @example
 *   <div class='h60 overflow-auto'>Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
 */
.overflow-auto {
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
}

/**
 * Hide content if it extends beyond the edge of the containing element.
 *
 * @memberof Miscellaneous
 * @example
 *   <div class='h60 overflow-hidden'>Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
 */
.overflow-hidden {
  overflow: hidden !important;
}

/**
 * Hide an element *visually*, but keep it available to screen readers.
 *
 * @memberof Miscellaneous
 * @example
 * <div class='hide-visually'>You cannot see this with your eyes.</div>
 * <div>There is a sentence above this that you cannot see.</div>
 */
.hide-visually {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

@media print {
  /**
   * Apply display none when rendering page for print.
   *
   * @memberof Miscellaneous
   * @example
   *   <div class="none-print'>Hi, this text won't print!</div>
   */
  .none-print {
    display: none !important;
  }
}