@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

:root,
:host {
  --xzx-swipe-indicator-size: 6px;
  --xzx-swipe-indicator-margin: 12px;
  --xzx-swipe-indicator-active-opacity: 1;
  --xzx-swipe-indicator-inactive-opacity: 0.3;
  --xzx-swipe-indicator-active-background: var(--xzx-color-primary);
  --xzx-swipe-indicator-inactive-background: var(--xzx-gray-3);
}

@include b(swipe-item) {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
}

@include b(swipe) {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;

  @include e(track) {
    display: flex;
    height: 100%;
    // improve transition perf
    transition-property: transform;

    @include m(vertical) {
      flex-direction: column;
    }
  }

  @include e(indicators) {
    position: absolute;
    bottom: var(--xzx-swipe-indicator-margin);
    left: 50%;
    display: flex;
    transform: translateX(-50%);

    @include m(vertical) {
      top: 50%;
      bottom: auto;
      left: var(--xzx-swipe-indicator-margin);
      flex-direction: column;
      transform: translateY(-50%);

      .#{$namespace}-swipe__indicator:not(:last-child) {
        margin-bottom: var(--xzx-swipe-indicator-size);
      }
    }
  }

  @include e(indicator) {
    width: var(--xzx-swipe-indicator-size);
    height: var(--xzx-swipe-indicator-size);
    background-color: var(--xzx-swipe-indicator-inactive-background);
    border-radius: 100%;
    opacity: var(--xzx-swipe-indicator-inactive-opacity);
    transition: opacity var(--xzx-duration-fast),
    background-color var(--xzx-duration-fast);

    &:not(:last-child) {
      margin-right: var(--xzx-swipe-indicator-size);
    }

    @include m(active) {
      background-color: var(--xzx-swipe-indicator-active-background);
      opacity: var(--xzx-swipe-indicator-active-opacity);
    }
  }
}