@use "../../variables/units";
@use "../../variables/colors";

@use "step-counter.variables" as step-counter-variables;

@mixin has-step-counter() {
  padding-block-start: units.$ru5;
  position: relative;
}

@mixin _step-counter-font-styling() {
  color: colors.$wit;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: step-counter-variables.$size;
  text-align: center;
}

@mixin _step-counter-shape-styling(
  $inset-inline-start: units.$u2,
  $inset-block-start: step-counter-variables.$icon-size * -1,
  $block-size: step-counter-variables.$size,
  $inline-size: step-counter-variables.$size,
  $border-size: step-counter-variables.$border-size
) {
  background-color: colors.$bosgroen;
  border: $border-size solid colors.$lime;
  border-radius: 50%;
  box-sizing: content-box;
  inset-inline-start: $inset-inline-start;
  position: absolute;
  inset-block-start: $inset-block-start;
  block-size: $block-size;
  inline-size: $inline-size;
}

@mixin step-counter-styling(
  $inset-inline-start: units.$u2,
  $inset-block-start: step-counter-variables.$icon-size * -1,
  $block-size: step-counter-variables.$size,
  $inline-size: step-counter-variables.$size,
  $border-size: step-counter-variables.$border-size
) {
  @include _step-counter-shape-styling(
    $inset-inline-start,
    $inset-block-start,
    $block-size,
    $inline-size,
    $border-size
  );
  @include _step-counter-font-styling();
}

@mixin ordered-action-list() {
  @include step-counter-styling(0, 0);
}

@mixin unordered-action-list() {
  @include _step-counter-shape-styling(4px, 4px, 28px, 28px, 6px);
}

@mixin step-counter() {
  .dso-step-counter {
    @include step-counter-styling();
  }
}

@mixin icon() {
  margin-block-start: units.$ru1 * 0.5;
}