@import "../node_modules/delite/css/includes";

@dot-size: 0.43em;
@dot-margin: 0.43em;
@dot-color: @gray-light;
@dot-selected-color: white;

@import "../node_modules/delite/css/mixins";

.d-view-indicator {
  display: block;
  text-align: center;
  .user-select(none);
  cursor: default;
  line-height: @dot-size;
  touch-action: none;
}

.d-view-indicator * {
  display: inline-block;
}

.-d-view-indicator-dot {
  padding: @dot-margin;
}

.-d-view-indicator-dot::before {
  color: 	@dot-color;
  content: "\25CF"; // solid circle

  .d-hc & {
    // Colors aren't good enough in high contrast mode, need to use different character.
    content: "\25CB"; // empty circle
  }
}

.-d-view-indicator-dot-selected::before {
  color: @dot-selected-color;

  .d-hc & {
    // Colors aren't good enough in high contrast mode, need to use different character.
    content: "\25CF"; // solid circle
  }
}