@use "sass:map";

.vuiProgressBar {
  position: relative;
  border-radius: $sizeS;
  height: $sizeS;
  overflow: hidden;
}

.vuiProgressBar__empty,
.vuiProgressBar__bar,
.vuiProgressBar__outline {
  position: absolute;
  width: 100%;
  height: 100%;
}

.vuiProgressBar__empty {
  z-index: 0;
  background-color: var(--vui-color-light-shade);
  box-shadow: inset rgba(0, 0, 0, 0.05) 0px 2px 2px;
}

.vuiProgressBar__bar {
  transition: all $transitionSpeed;
  z-index: 1;
}

.vuiProgressBar__outline {
  z-index: 2;
  border-radius: $sizeXxs;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

// Color
$color: (
  accent: (
    "background-color": linear-gradient(to top, var(--vui-color-accent-shade), var(--vui-color-accent-light-shade))
  ),
  primary: (
    "background-color": linear-gradient(to top, var(--vui-color-primary-shade), var(--vui-color-primary-light-shade))
  ),
  success: (
    "background-color": linear-gradient(to top, var(--vui-color-success-shade), var(--vui-color-success-light-shade))
  ),
  warning: (
    "background-color": linear-gradient(to top, var(--vui-color-warning-shade), var(--vui-color-warning-light-shade))
  ),
  danger: (
    "background-color": linear-gradient(to top, var(--vui-color-danger-shade), var(--vui-color-danger-light-shade))
  ),
  neutral: (
    "background-color": linear-gradient(to top, var(--vui-color-dark-shade), var(--vui-color-medium-shade))
  )
);

@each $colorName, $colorValue in $color {
  .vuiProgressBar--#{$colorName} {
    .vuiProgressBar__bar {
      background-image: #{map.get($colorValue, "background-color")};
    }
  }
}