@import './mixins/mixins.scss';
@import './themes/vars.scss';

@include themes-mixin {
  @include b(loading-bar-container) {
    @include once {
      @include fade-in-transition(fade-in, .3s, .8s);
      z-index: 5800;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
    }
    @include b(loading-bar) {
      @include once {
        width: 100%;
        transition: max-width 4s linear, background-color .2s linear;
        max-width: 0;
      }
      height: $--loading-bar-height;
      @include m(starting) {
        background-color: map-get($map: $--loading-bar-background-color, $key: 'loading');
        transition: max-width 4s linear, background-color .2s linear;
      }
      @include m(finishing) {
        background-color: map-get($map: $--loading-bar-background-color, $key: 'loading');
        transition: max-width .2s linear, background-color .2s linear;
      }
      @include m(error) {
        background-color: map-get($map: $--loading-bar-background-color, $key: 'error');
        transition: max-width .2s linear, background-color .2s linear;
      }
    }
  }
}