@use "sass:map";

.vuiDurationBar {
  position: relative;
  // Set height here to ensure the component's height
  // affects the surrounding layout.
  height: $sizeXs;
}

.vuiDurationBar__bar {
  position: absolute;
  height: 100%;
}

// Color
$color: (
  accent: (
    "background-color": var(--vui-color-accent-shade)
  ),
  primary: (
    "background-color": var(--vui-color-primary-shade)
  ),
  success: (
    "background-color": var(--vui-color-success-shade)
  ),
  warning: (
    "background-color": var(--vui-color-warning-shade)
  ),
  danger: (
    "background-color": var(--vui-color-danger-shade)
  ),
  neutral: (
    "background-color": var(--vui-color-dark-shade)
  ),
  subdued: (
    "background-color": var(--vui-color-subdued-shade)
  ),
  medium: (
    "background-color": var(--vui-color-medium-shade)
  )
);

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