@use '../utils/box-shadow_variables';
@use '../utils/size_variables';

/**
 * Copyright IBM Corp. 2016, 2025
 * SPDX-License-Identifier: BUSL-1.1
 */

.progress {
  appearance: none;
  background: var(--token-color-surface-faint);
  border: none;
  box-shadow: inset box-shadow_variables.$box-link-shadow;
  border-radius: var(--token-border-radius-x-small);
  display: block;
  height: size_variables.$size-6;
  overflow: hidden;
  padding: 0;
  margin-bottom: 0;
  width: 100%;

  &.is-small {
    height: 0.5rem;
  }
  &.is-narrow {
    width: 30px;
  }
  &.is-medium {
    height: size_variables.$size-5;
    width: 120px;
  }
}

// style the container in chrome
.progress[value]::-webkit-progress-bar {
  background-color: #ededed;
  box-shadow: inset box-shadow_variables.$box-link-shadow;
}

// style the bar in chrome
.progress[value]::-webkit-progress-value {
  background-color: #4a4a4a;
  border-radius: var(--token-border-radius-x-small);
  transition: width 1s size_variables.$easing;
}

// style the bar in firefox
.progress[value]::-moz-progress-bar {
  border-radius: var(--token-border-radius-x-small);
  transition: width 1s size_variables.$easing;
}

.progress::-ms-fill {
  background-color: #4a4a4a;
  border: none;
}

// is-success and is-info are the two types of progress bars we have
.progress.is-info::-webkit-progress-value {
  background-color: #3e8ed0;
}

.progress.is-info::-moz-progress-bar {
  background-color: #3e8ed0;
}

.progress.is-info::-ms-fill {
  background-color: #3e8ed0;
}

.progress.is-info:indeterminate {
  background-image: linear-gradient(to right, #3e8ed0 30%, #ededed 30%);
}

.progress.is-success::-webkit-progress-value {
  background-color: var(--token-color-palette-green-200);
}

.progress.is-success::-moz-progress-bar {
  background-color: var(--token-color-palette-green-200);
}

.progress.is-success::-ms-fill {
  background-color: var(--token-color-palette-green-200);
}

.progress.is-success:indeterminate {
  background-image: linear-gradient(to right, var(--token-color-palette-green-200) 30%, #ededed 30%);
}
