import { css } from 'lit';

export default css`

:host{
  -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
}
  .nile-progress-bar__container {
    width: 100%;
    margin: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-height-auto, var(--ng-height-auto));
  }

  .nile-progress-bar__progress-bar {
    width: 100%;
    counter-reset: step;
    padding: var(--nile-spacing-none, var(--ng-spacing-none));
    margin: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-height-auto, var(--ng-height-auto));
    list-style: none;
    display: flex;
    height: var(--nile-height-6px, var(--ng-height-8px));
    justify-content: space-between;
  }

  .nile-progress-bar__progress-bar li {
    position: relative;
    width: 100%;
    height: var(--nile-height-6px, var(--ng-height-8px));
    background-color: var(--nile-progress-bar-track-color-stroke, var(--ng-colors-bg-quaternary));
    transition: stroke-dashoffset 0.8s ease-in-out;
    border-radius: var(--nile-radius-sm, var(--ng-radius-full));
    overflow: hidden;
  }

   

  .nile-progress-bar__progress-bar li.changeColor::after {
    background-color: var(--nile-progress-bar-progress-color-stroke, var(--ng-colors-fg-brand-primary-600));
  }

  .nile-progress-bar__progress-bar li span {
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--nile-progress-bar-progress-color-stroke, var(--ng-colors-fg-brand-primary-600));
    height: 100%;
    transition: all 1s linear;
    border-radius: var(--nile-radius-sm, var(--ng-radius-full));
  }

  .nile-progress-bar__progress-bar.lg li span {
    border-radius: var(--nile-radius-sm, var(--ng-radius-full));
  }

  .nile-progress-bar__reset {
    background-color: var(--nile-progress-bar-track-color-stroke, var(--ng-colors-bg-quaternary));
    position: absolute;
    z-index: 1;
    border-radius: var(--nile-radius-sm, var(--ng-radius-full));
  }
`;