/*******************************************************************************
  Host and CSS properties
*******************************************************************************/

:host {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: stretch;

  contain: content;

  -webkit-tap-highlight-color: rgba(0,0,0,0);

  --macro-carousel-gap: 16px;

  --macro-carousel-background-color: transparent;

  --macro-carousel-slide-min-height: 0px;
  --macro-carousel-slide-max-height: none;

  --macro-carousel-transition-duration: 0.6s;
  --macro-carousel-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --macro-carousel-pagination-gap: 2px;
  --macro-carousel-pagination-height: 44px;

  --macro-carousel-fallback-message-color-background: #fff;

  --macro-carousel__internal__slides-per-view: 1;
}

:host([hidden]) {
  display: none
}

/* focus-visible polyfill: no outline on :focus when it's not .focus-visible */
:host-context(.js-focus-visible) :focus:not(.focus-visible),
:host-context(.js-focus-visible) ::slotted(*:focus:not(.focus-visible)) {
  outline: 0;
}

/*******************************************************************************
  External wrapper: fixed size, containment, bg color, touch-action, pointer.
*******************************************************************************/
#externalWrapper {
  height: 100%;

  overflow: hidden;
  contain: paint;

  background-color: var(--macro-carousel-background-color);

  /*
    https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
  */
  touch-action: pan-y pinch-zoom;

  cursor: grab;
}

#externalWrapper:active {
  cursor: grabbing;
}

:host([disable-drag]) #externalWrapper {
  cursor: default;
}

/*******************************************************************************
  Slides wrapper: flexbox container, is the transitioning element when moving
  the slides.
*******************************************************************************/
#slidesWrapper {
  display: flex;
  align-items: stretch;

  height: 100%;
  min-height: var(--macro-carousel-slide-min-height);
  max-height: var(--macro-carousel-slide-max-height);

  will-change: transform;
}

:host([transitioning]) #slidesWrapper {
  transition-property: transform;
  transition-duration: var(--macro-carousel-transition-duration);
  transition-timing-function: var(--macro-carousel-transition-timing-function);
}

/*******************************************************************************
  Slides: width is calculated with a css formula
*******************************************************************************/
#slidesWrapper ::slotted(*) {
  flex-grow: 0;
  flex-shrink: 0;
  /* (100% - gap * (slidesPerView - 1)) / slidesPerView */
  flex-basis: calc((100% - (var(--macro-carousel__internal__slides-per-view) - 1) *
      var(--macro-carousel-gap)) / var(--macro-carousel__internal__slides-per-view));

  min-height: var(--macro-carousel-slide-min-height);
  max-height: var(--macro-carousel-slide-max-height);

  margin-right: var(--macro-carousel-gap);

  /*
   * Enforces the slides to keep their size even if the content requires
   * a bigger slide size.
   */
  overflow: hidden;

  outline: 0;

  user-select: none;
}

.slidesFallback {
  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0;
  padding: .5em 1em;

  width: 100%;

  background-color: var(--macro-carousel-fallback-message-color-background);
}

:host([disable-drag]) #slidesWrapper ::slotted(*) {
  user-select: auto;
}

/*******************************************************************************
  Pagination styles
*******************************************************************************/
#pagination {
  display: none;
}

:host([pagination]) #pagination {
  align-self: center;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: var(--macro-carousel-pagination-height);

  contain: strict;

  font-size: 0;
}

div ::slotted(macro-carousel-pagination-indicator) {
  margin: 0 calc(var(--macro-carousel-pagination-gap) / 2);
  padding: 0;

  font-size: inherit;

  opacity: .8;
}


div ::slotted(macro-carousel-pagination-indicator:hover),
div ::slotted(macro-carousel-pagination-indicator.selected) {
  opacity: 1;
}

/*******************************************************************************
  Navigation styles (rest of styles is in macro-carousel-nav-button.css)
*******************************************************************************/
#navigation {
  display: none;
}

:host([navigation]) #navigation {
  display: block;
}

div ::slotted(macro-carousel-nav-button) {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

:host([pagination]) div ::slotted(macro-carousel-nav-button) {
  top: calc(50% - var(--macro-carousel-pagination-height) / 2);
}

div ::slotted(.macro-carousel-previous) {
  left: 0;
}

div ::slotted(.macro-carousel-next) {
  right: 0;
}

/*******************************************************************************
  aria-live styles
*******************************************************************************/
#aria-live ::slotted(*) {
  position: absolute;

  height: 1px;
  width: 1px;

  margin: -1px;
  padding: 0;

  clip: rect(0 0 0 0);

  overflow: hidden;

  border: 0;
}

/*******************************************************************************
 * Print styles:
 * - Show all slides and stack them vertically
 * - Eliminate the slide gap, show an outline
 * - make sure the page doesn't break a slide in half
 * - hide pagination and navigation buttons
*******************************************************************************/

@media print {
  #slidesWrapper ::slotted(*) {
    margin-right: 0;
    margin-bottom: .2em;

    outline: 1px solid #000;

    color: #000;

    page-break-inside: avoid;
  }

  /* Remove the navigational buttons, they provide no context in print */
   :host([navigation]) #navigation,
   :host([pagination]) #pagination {
    display: none;
  }

  /* Stack the slides */
  #slidesWrapper {
    display: block;

    transform: none !important;
    transition: 0s;
  }
}
