@use 'global/common' as global;

/* ------------------------------
 プログレスバー
------------------------------- */
// 全体
.acms-progress {
  height: global.$acms-progress-height;
  background: global.$acms-progress-bg;
  border: global.$acms-progress-border;
  border-radius: global.$acms-progress-border-radius;
}

// バー
.acms-progress-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: global.$acms-progress-bar-text;
  text-align: center;
  background-color: global.$acms-progress-bar-color;

  @include global.transition(width 0.6s ease);
}

// info
.acms-progress-bar-info {
  background-color: global.$acms-progress-bar-color-info;
}

// danger
.acms-progress-bar-danger {
  background-color: global.$acms-progress-bar-color-danger;
}

// striped
.acms-progress-striped .acms-progress-bar {
  @include global.striped;

  background-size: global.$acms-progress-bar-stripe-width global.$acms-progress-bar-stripe-width;
}

// アニメーション
.acms-progress.acms-active .acms-progress-bar {
  @include global.animation(progress-bar-stripes 2s linear infinite);
}

// Keyframes
@keyframes progress-bar-stripes {
  from {
    background-position: global.$acms-progress-bar-stripe-width 0;
  }

  to {
    background-position: 0 0;
  }
}

@keyframes progress-bar-stripes {
  from {
    background-position: global.$acms-progress-bar-stripe-width 0;
  }

  to {
    background-position: 0 0;
  }
}
