@use 'sass:math' as math;

$indicator-width: 1rem;

@mixin private-pgh-indicator-config($config) {
  [data-pgh-indicator~='#{$config}'] {
    @content;
  }
}

@mixin private-pgh-indicator-color($color-variable) {
  background-color: var(--#{$color-variable});
  box-shadow: 0 0 3px var(--#{$color-variable}-300);
  border: 1px solid var(--#{$color-variable}-50);
}

@mixin private-pgh-indicator-position($position) {
  $offset: -(math.div($indicator-width, 2));
  #{$position}: $offset;
}

[data-pgh-indicator] {
  position: relative;

  &::after {
    content: '';
    border-radius: 50%;
    position: absolute;
    z-index: 3;
    width: $indicator-width;
    height: $indicator-width;
    @include private-pgh-indicator-color(primary);
  }
}

$colors: (
  accent: accent,
  warn: warning,
  danger: danger,
);
@each $colorOption, $paletteColor in $colors {
  @include private-pgh-indicator-config($colorOption) {
    &::after {
      @include private-pgh-indicator-color($paletteColor);
    }
  }
}

$positions: (
  top: top,
  bottom: bottom,
  start: inset-inline-start,
  end: inset-inline-end,
);
@each $position, $property in $positions {
  @include private-pgh-indicator-config($position) {
    &::after {
      @include private-pgh-indicator-position($property);
    }
  }
}

@include private-pgh-indicator-config(hidden) {
  &::after {
    display: none;
  }
}