@import '@bolt/core-v3.x';

bolt-carousel {
  display: flex;
  align-items: center;
  align-items: stretch;
  position: relative;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  &.is-ready {
    overflow: visible;
  }

  &:not(:last-child) {
    margin-bottom: var(--bolt-spacing-y-medium);
  }

  // add custom scrollbar styling till JS kicks in
  &:not(.is-ready) {
    &:not([no-pagination]) {
      padding-bottom: calc(
        #{$bolt-carousel-bullet-height} + var(--bolt-spacing-y-xsmall)
      );
    }

    overflow-x: auto;
    overflow-y: hidden;

    @include bolt-mq($until: medium) {
      overflow-x: visible;
    }
  }
}

.c-bolt-carousel {
  @include bolt-z-index(content); /* Fix of Webkit flickering */

  position: relative;
  width: auto;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  margin: 0 auto;
  padding: 0;
  list-style: none;

  &--overflow,
  &--no-overflow {
    min-width: calc(100% + var(--c-bolt-carousel-space-around) * 2);
    max-width: 0;
    overflow: hidden;
    margin-right: calc(var(--c-bolt-carousel-space-around) * -1);
    margin-left: calc(var(--c-bolt-carousel-space-around) * -1);
    padding-right: var(--c-bolt-carousel-space-around);
    padding-left: var(--c-bolt-carousel-space-around);
  }

  &--overflow {
    overflow: visible;
  }
}

.c-bolt-carousel__wrapper {
  display: flex;
  box-sizing: content-box;
  transform: translate3d(0, 0, 0);
  width: 100%;
  height: auto;
  transition-property: transform;
}

.c-bolt-carousel--invisible-blank {
  visibility: hidden;
}

/* IE10 Windows Phone 8 Fixes */
.c-bolt-carousel--wp8-horizontal {
  &,
  & > .c-bolt-carousel__wrapper {
    touch-action: pan-y;
  }
}

.c-bolt-carousel--wp8-vertical {
  &,
  & > .c-bolt-carousel__wrapper {
    touch-action: pan-x;
  }
}

// carousel's nav position-specific styles
// if nav-position isn't specified, set to default
bolt-carousel[no-nav-buttons].is-ready,
bolt-carousel[nav-button-position='outside'].is-ready {
  min-width: calc(100% + var(--bolt-spacing-x-medium) * 2);
  margin-right: calc(var(--bolt-spacing-x-medium) * -1);
  margin-left: calc(var(--bolt-spacing-x-medium) * -1);
  padding-right: var(--bolt-spacing-x-medium);
  padding-left: var(--bolt-spacing-x-medium);

  // mirror approach used by Wrapper at larger screen sizes
  @include bolt-mq(medium) {
    min-width: calc(100% + var(--bolt-spacing-x-large) * 2);
    margin-right: calc(var(--bolt-spacing-x-large) * -1);
    margin-left: calc(var(--bolt-spacing-x-large) * -1);
    padding-right: var(--bolt-spacing-x-large);
    padding-left: var(--bolt-spacing-x-large);
  }
}

// carousel space-between slides
bolt-carousel {
  &[space-between='none'] {
    --c-bolt-carousel-space-between: 0rem;
  }

  &[space-between='small'] {
    --c-bolt-carousel-space-between: var(--bolt-spacing-x-small);
  }

  &,
  &[space-between='medium'] {
    --c-bolt-carousel-space-between: var(--bolt-spacing-x-medium);
  }

  &[space-between='large'] {
    --c-bolt-carousel-space-between: var(--bolt-spacing-x-large);
  }
}

// extra space around-specific styles
bolt-carousel {
  --c-bolt-carousel-space-around: #{$bolt-carousel-space-around};

  width: calc(100% + var(--c-bolt-carousel-space-around) * 2);
  margin-right: calc(var(--c-bolt-carousel-space-around) * -1);
  margin-left: calc(var(--c-bolt-carousel-space-around) * -1);

  &.is-ready {
    padding-right: var(--c-bolt-carousel-space-around);
    padding-left: var(--c-bolt-carousel-space-around);
  }
}