// embl-breadcrumbs-lookup

@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')}
 */

.embl-grid .embl-breadcrumbs-lookup:first-child {
  // .embl-grid's frist-child property brings higher specificity
  // it also has a margin bottom, so we don't need the .vf-breadcrumbs margin
  grid-column: 1/-1;
  margin-bottom: 0;
}

.embl-breadcrumbs-lookup--ghosting {
  animation: embl-breadcrumbs-lookup-ghosting-animation 4s ease-in-out infinite alternate;
  background: 50% top / 15% 60% linear-gradient(90deg, ui-color(grey) 0%, ui-color(grey--light) 30%, ui-color(grey--light) 50%, ui-color(grey) 100%);
  display: block;
  filter: blur(1rem);
  height: 17px;
  margin-bottom: 5px;
  margin-top: 5px;
  mask-border: url('../assets/embl-breadcrumbs-lookup/assets/embl-breadcrumbs-lookup-ghost.svg') stretch;
  max-width: 60rem;
  width: 100%;
}

@keyframes embl-breadcrumbs-lookup-ghosting-animation {
  to {
    background-position: 100%;
  }
}