// vf-show-more

// **Thinking about deleting this file?**
// If your component needs no CSS/Sass, we still recommend leaving the
// scss files in place. As this is primarily a CSS framework, it is better to
// leave the empty files so you know a file wasn't accidentally omitted.
// If you don't have any Sass, you can trim this block down to:
// "This page was intentionally left blank"

@import 'package.variables.scss';
// Debug information from component's `package.json`:
// ---
/*!
 * Component: #{map-get($componentInfo, 'name')}
 * Version: #{map-get($componentInfo, 'version')}
 * Location: #{map-get($componentInfo, 'location')}
 */

@import 'vf-show-more.variables.scss';

// You need to add this Sass file to ./components/vf-component-rollup/index.scss
// @import 'vf-show-more/vf-show-more.scss';

// Animation
// Hiding CSS is added in JS
.vf-show-more__item {
  @media (prefers-reduced-motion: no-preference) {
    animation: scale-up-top .1s cubic-bezier(.39, .575, .565, 1) both;
  }
}

// Only "show more" button if not yet clicked
.vf-show-more.is-active .vf-show-more__button {
  display: none;
}

// hide overflow items by default
// vf-show-more__item-overflow is dynamically added by JS to items greater than the desired amount
.vf-show-more:not(.is-active) .vf-show-more__item-overflow {
  display: none;
}

// hide the show more button if there's no JS.
.vf-no-js .vf-show-more__button {
  display: none !important;
}

// Show less
.vf-show-more__button--less {
  display: none;
}
.vf-show-more.is-active .vf-show-more__button--less {
  display: unset;
}


/* ----------------------------------------------
* Generated by Animista on 2020-1-15 15:8:38
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/**
* ----------------------------------------
* animation scale-up-top
* ----------------------------------------
*/

@keyframes scale-up-top {
  0% {
    transform: scale(.5);
    transform-origin: 50% 0%;
  }
  100% {
    transform: scale(1);
    transform-origin: 50% 0%;
  }
}