@use 'variables' as *;
@use '../xui';

@mixin theme() {
  .x-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 24px;

    &-indicator {
      flex: 1 1 auto;
      min-width: 200px;
      height: 8px;
      display: flex;

      background-color: var(--color-bg-primary);

      @include xui.border-radius($border-radius);
    }

    &-indicator-status {
      @include xui.border-radius($border-radius);
    }

    @each $name in xui.$color-variations {
      &-#{$name} {
        background-color: var(--color-#{$name}-default);
      }
    }
  }
}