@use 'sass:color';
@use '../utils/color-helper' as helper;
@use '../variables' as vars;

// BsProgress mixins - SASS variables
//------------------------------------
@mixin make-css-vars() {
  &.#{vars.$prefix}indeterminate {
    background-color: var(--#{vars.$prefix}progress-bar-bg);

    > .#{vars.$prefix}progress-bar-track,
    > .#{vars.$prefix}progress-bar-fill {
      &:after {
        background-color: var(--#{vars.$prefix}progress-bar-bg-after);
      }
    }
  }

  &.#{vars.$prefix}determinate {
    background-color: var(--#{vars.$prefix}progress-bar-bg);

    > .#{vars.$prefix}progress-bar-fill {
      background-color: var(--#{vars.$prefix}progress-bar-fill-bg);
    }
  }

  &.#{vars.$prefix}buffer {
    .#{vars.$prefix}progress-bar-fill {
      background-color: var(--#{vars.$prefix}progress-bar-fill-bg);
    }

    .#{vars.$prefix}progress-bar-track {
      background-color: var(--#{vars.$prefix}progress-bar-track-bg);
    }

    .#{vars.$prefix}progress-bar-buffer {
      border-color: var(--#{vars.$prefix}progress-bar-buffer-border-color);
    }
  }
}

@mixin make-bar-variant($name, $color) {
  $color-oklch: helper.to-oklch($color);

  .progress-bar-#{$name} {
    --#{vars.$prefix}progress-bar-bg: #{color.change($color-oklch, $alpha: 0.24)};
    --#{vars.$prefix}progress-bar-fill-bg: #{$color};
    --#{vars.$prefix}progress-bar-track-bg: #{color.change($color-oklch, $alpha: 0.38)};
    // prettier-ignore
    --#{vars.$prefix}progress-bar-buffer-border-color: #{color.change($color-oklch, $alpha:0.38)};

    &.#{vars.$prefix}indeterminate {
      > .#{vars.$prefix}progress-bar-track,
      > .#{vars.$prefix}progress-bar-fill {
        &:after {
          --#{vars.$prefix}progress-bar-bg-after: #{$color};
        }
      }
    }
  }
}

@mixin make-spinner-variant($name, $color) {
  .spinner-#{$name} {
    .#{vars.$prefix}progress-spinner-circle {
      stroke: $color;
    }
  }
}