@import "~bootstrap/scss/progress";

// Progress
.x-progress {
  @extend %d-flex,
          %overflow-hidden,
          %position-relative,
          %w-100;

    &_detail {
      @extend %x-flex-center,
              %px-3,
              %text-white,
              %position-absolute,
              %w-100;
      top: 0;

      .x-text {
        @extend %text-reset,
                %font-size-xs,
                %font-weight-medium;
      }
    }

    &_btn .btn {
      @extend %p-0,
              %text-reset,
              %font-size-xs,
              %font-weight-medium;
    }

    // Status //
    .progress {
      @extend %h-100;
      @include border-radius(0);
      background-color: var(--custom-theme-primary, theme-color('primary'));

      .progress-bar {
        @extend .progress-bar-striped;
        background-color: var(--custom-theme-primary, theme-color('primary'));
      }
    }

    // Cancel
    &.info .progress {
      background-color: rgba(theme-color('info'), 0.5);
    }

    // Error
    &.danger .progress {
      background-color: rgba(theme-color('danger'), 0.5);
    }

    // Success
    &.success .progress {
      background-color: rgba(theme-color('success'), 0.5);
    }
}