@use '../../helpers';
@use '../../mixins';

@mixin Progress() {
  @if not mixins.includes('Progress') {
    @include _Progress();
  }
}

@mixin _Progress() {
  .ods-progress {
    @include helpers.font('200-regular');
    display: inline-grid;
    gap: helpers.space(0.5);
    grid: auto-flow / auto;
    position: relative;
    text-align: center;
    width: 100%;

    &::before,
    &::after {
      border-radius: helpers.border-radius('full');
      content: '';
      height: helpers.space(0.5);
    }

    &::before {
      background-color: helpers.color('background-progress');
      width: 100%;
    }

    &::after {
      background-color: helpers.color('content-progress');
      position: absolute;
      transition: width var(--ods-transition-duration) ease-in-out;
      width: var(--percent-value);
    }

    &.-large::before,
    &.-large::after {
      height: helpers.space(1);
    }

    &.-large {
      @include helpers.font('300-regular');
      gap: helpers.space(1);
    }
  }
}