@use "sb-element/core/theming";
@use "sb-element/core/border";
/*****************************************************************************
Progress / Theme
******************************************************************************/

// THEME
@mixin theme($theme) {
  .sb-progress {

    &:not(.outline) {
      background: theming.get-accent($theme);
    }

    &.outline {
      @include border.border-accent($theme, m);
    }


    @include theming.for-each-color($theme) using ($color) {
      &.sb--#{$color} &__bar {
        background-color: theming.get-color($theme, $color);
        color: theming.get-text($theme, $color);
      }

      &.sb--#{$color}.striped &__bar {
        background-image: linear-gradient(45deg,
          rgba(0,0,0,0) 25%,
          theming.get-color-inverted($theme, $color) 25%,
          theming.get-color-inverted($theme, $color) 50%,
          rgba(0,0,0,0) 50%,
          rgba(0,0,0,0) 75%,
          theming.get-color-inverted($theme, $color) 75%,
          theming.get-color-inverted($theme, $color) 100%,
          rgba(0,0,0,0) 100%
        );
      }
    }
  }
}