@import "tools.functions";

/**
 * When JavaScript is enabled, reveal the counter and arrow buttons, and hide the scrollbar
 */
@mixin c-carousel-js-enabled {
  .c-carousel__header {
    display: flex;
    align-items: center;
  }
  .c-carousel__count {
    margin-left: rem(20);
    display: block;
  }
  .c-carousel__arrow {
    display: flex;
  }
  .c-carousel__arrow--right,
  .c-carousel__arrow--rewind {
    justify-content: flex-end;
  }
  .c-carousel__content {
    overflow: hidden;
  }
  .c-carousel__slide--placeholder {
    display: block;
  }
}

@mixin c-carousel-large-button-icons {
  .c-carousel__arrow-inner {
    width: rem(40);
  }
}

/**
 * Set the height of the carousel
 */
@mixin c-carousel-height($height: 100) {
  .c-carousel__content,
  .c-carousel__slide-content {
    height: rem($height);
  }
  .c-carousel__slides {
    // Make scrollable area taller than its container so that its horizontal
    // scrollbar will be hidden by the container's "overflow: hidden"
    height: rem($height + 20);
  }
  .c-carousel__slide {
    line-height: rem($height);
  }
}

/**
 * Set the width of the gutters between the slides
 */
@mixin c-carousel-gutter($gutter: 0) {
  .c-carousel__slide {
    padding-left: rem($gutter);
    padding-right: rem($gutter);
  }
}

/**
 * Calculate the widths of the slides, buttons and placeholder
 */
@mixin c-carousel-slides($slides: 1, $button-width: 0, $gutter: 0) {
  $percent: 100% / $slides;
  $button-width-2x: $button-width * 2;
  $gutter-2x: $gutter * 2;

  .c-carousel__slide {
    // Examples:
    // - calc(50% - (88px / 2) - (15px / 2));
    // - calc(25% - (88px / 4) - (15px / 4));
    // width: calc(#{$percent} - (#{$button-width-2x}px / #{$slides}) - (#{$gutter-2x}px / #{$slides}));
    width: calc(#{$percent} - #{rem($button-width-2x / $slides)} - #{rem($gutter-2x / $slides)});
  }
  .c-carousel__slide--placeholder {
    width: rem($button-width + $gutter);
  }
  .c-carousel__arrow {
    width: rem($button-width);
  }
}
