@import '../../../../globals/breakpoints';
@import '../../../../globals/fonts';
@import '../../../../globals/mixins';
@import '../../../../globals/variables';

.ol-bullet {
  background-color: $ads-primary-main;
  display: inline-block;
  margin: 0.5rem;

  &--active {
    background-color: $ads-primary-main;
    box-shadow: 0 0 0 5px rgb(7 147 191 / 25%);
  }

  &--circle {
    border-radius: 50%;
  }

  &--rounded {
    border-radius: 0.5rem;
  }

  &--square {
    border-radius: 0;
  }

  &--sm {
    height: 0.5rem;
    width: 0.5rem;
  }

  &--md {
    height: 0.75rem;
    width: 0.75rem;
  }

  &--lg {
    height: 1rem;
    width: 1rem;
  }

  @include respond-to('small') {
    &--sm {
      height: 0.5rem;
      width: 0.5rem;
    }

    &--md {
      height: 0.75rem;
      width: 0.75rem;
    }

    &--lg {
      height: 1rem;
      width: 1rem;
    }
  }

  @include respond-to('medium') {
    &--sm {
      height: 1rem;
      width: 1rem;
    }

    &--md {
      height: 1.5rem;
      width: 1.5rem;
    }

    &--lg {
      height: 2rem;
      width: 2rem;
    }
  }

  @include respond-to('large') {
    &--sm {
      height: 1.5rem;
      width: 1.5rem;
    }

    &--md {
      height: 2.25rem;
      width: 2.25rem;
    }

    &--lg {
      height: 3rem;
      width: 3rem;
    }
  }
}
