@include b(carousel) {
  @include define(pagination-margin, 8px);
  @include define(pagination-item-width, 18px);
  @include define(pagination-item-height, 4px);
  @include define(pagination-item-border-radius, 1px);
  @include define(pagination-item-spacing, 2px);
  @include define(pagination-item-background, rgba(255, 255, 255, 0.6));
  @include define(pagination-item-active-background, #fff);

  position: relative;
  overflow: hidden;
  touch-action: none;

  @include e(items) {
    display: flex;
    // transform-style: preserve-3d;
    transition-property: transform;
  }

  @include e(item) {
    flex-shrink: 0;
    position: relative;
    width: 100%;
    height: 100%;
    vertical-align: top;
    transition-property: transform;
    transform: translateZ(0);
  }

  @include e(pagination) {
    position: absolute;
  }

  @include e(pagination__item) {
    background: var(--pagination-item-background);
    cursor: pointer;
    border-radius: var(--pagination-item-border-radius);

    @include m(active) {
      background: var(--pagination-item-active-background);
    }
  }

  @include m(horizontal) {
    @include e(items) {
      white-space: nowrap;
    }

    @include e(pagination) {
      left: 50%;
      bottom: var(--pagination-margin);
      transform: translate3d(-50%, 0, 0);
    }

    @include e(pagination__item) {
      display: inline-block;
      width: var(--pagination-item-width);
      height: var(--pagination-item-height);

      &:not(:last-child) {
        margin-right: var(--pagination-item-spacing);
      }
    }
  }

  @include m(vertical) {
    @include e(items) {
      flex-direction: column;
      touch-action: none;
    }

    @include e(pagination) {
      top: 50%;
      right: var(--pagination-margin);
      transform: translate3d(0, -50%, 0);
    }

    @include e(pagination__item) {
      width: var(--pagination-item-height);
      height: var(--pagination-item-width);

      &:not(:last-child) {
        margin-bottom: var(--pagination-item-spacing);
      }
    }
  }
}