/* 
 * Caution: "global styles" get injected into every component and can cause file size bloat.
 * These should only include SASS variables and mixins that are not written out to CSS directly
 */
:root {
  --cbp-carousel-height: 100%;
  --cbp-carousel-width: 100%;
  --cbp-carousel-offset: 0;
  --cbp-carousel-offset-start: 0;
  --cbp-carousel-viewer-padding-bottom: var(--cbp-space-3x) ;
}

cbp-carousel {
  display: block;
}
cbp-carousel .cbp-carousel-viewer {
  height: var(--cbp-carousel-height);
  width: var(--cbp-carousel-width);
  overflow: hidden;
  padding-bottom: var(--cbp-carousel-viewer-padding-bottom);
}
cbp-carousel .cbp-carousel-viewer .cbp-carousel-container {
  height: 100%;
  display: flex;
  transform: translateX(var(--cbp-carousel-offset));
  transition: all 0.5s ease-out;
}