/*
Copyright (C) 2017  Cloudbase Solutions SRL

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

@import '../variables.scss';


.root {
  .outer {
    overflow: hidden;
    height: 8px;
    width: 100%;
    border: 1px solid $gray;
    border-radius: $border-radius;
    .inner {
      $bgWidth: 600px;
      height: 8px;
      transition: width $animation-swift-out;
      background-image: url('data:image/svg+xml;utf8,<svg width="$bgWidth" height="16px" viewBox="0 0 $bgWidth 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><pattern id="pattern-1" width="12.4264706" height="12.4264706" x="-12.4264706" y="-12.4264706" patternUnits="userSpaceOnUse"><use xlink:href="%23image-2" transform="scale(0.155330882,0.155330882)"></use></pattern><image id="image-2" width="80" height="80" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAABGdBTUEAALGPC/xhBQAAAeJJREFUeAHt3FtuwyAQBdCkq/EOmyWkO/RuWk+jtHlgDMMA87h8WUZ3BEdIlozxeV3X75NsuyzL8iVbkl9tm9/nlr7yK+STH/nu6t5QeKQjCRgOTxIwJJ4UYFg8CcDQeK2A4fFaAIFHelvjPIWBd7NjAQLvAY8ua1Yg8F7wagCBl8ArBQTeDl4JIPAyeEeAwDvAywECrwBvDxB4hXgpQOBV4L0CAq8S7xEQeAy8OyDwmHgUOzdkxaO9N4DEB3w6XdQAWsSj3UcVgFbxaEVPB7SMNx3QOt5UQA940wC94E0B9IQ3HNAb3lBAj3jDAL3iDQH0jNcd0DteV8AIeN0Ao+B1AYyEJw4YDU8UMCKeGGBUPBHAyHjNgNHxmgCBR3zMV/rAu+GxAIH3j1cNCLxnvCpA4L3jFQMCL41XBAi8fbxDQODl8bKAwDvG2wUEXhleEhB45XhvgMCrw3sCBF493h8g8Hh4v4DA4+NRko67dvspTdvQkml1H8TXnBdOzmjgTXV429yvVgBV4tHisQCoFs8CoGo87YDq8TQDmsDTCmgGTyOgKTxtgObwNAGaxNMCaBZPA6BpvNmA5vFmArrAmwXoBm8GoCu80YDu8EYCusQbBegWbwSga7zegO7xegKGwCPAH6jFkxG1FP01AAAAAElFTkSuQmCC"></image></defs><rect id="Base" stroke="none" fill="%230056B8" fill-rule="evenodd" x="0" y="0" width="$bgWidth" height="16"></rect><rect id="Base" stroke="none" fill="url(%23pattern-1)" fill-rule="evenodd" opacity="0.440443841" style="mix-blend-mode: luminosity;" x="0" y="0" width="$bgWidth" height="16"></rect></svg>');
      animation: bgMotion 1s infinite linear;
      &.completed {
        animation: none;
      }
    }
  }
}

@keyframes bgMotion {
  0% {
    background-position: -12px 0;
  }
  100% {
    background-position: 0 0;
  }
}

