.ca-slider-dots {
  $block: &;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;

  &__dot {
    margin: 0 4px;

    &--hidden {
      display: none;
    }
  }

  &__trigger {
    width: $px20;
    height: rem-calc(6px);
    background-color: $c-light-gray;
    border-radius: rem-calc(4px);
    padding: 0;
    transition: background-color 200ms ease;
    text-indent: -100000px;

    &--current {
      background-color: var(--accent-color, $c-accent-color);
    }

    @include bp(tablet) {
      width: $px24;
    }
  }
}