// Copyright 2017 Google Inc. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

@import "@material/animation/functions";
@import "@material/theme/mixins";
@import "./keyframes";

.mdc-linear-progress {
  position: relative;
  width: 100%;
  height: 4px;
  transform: translateZ(0);
  transition: mdc-animation-exit-temporary(opacity, 250ms);
  overflow: hidden;

  &__bar {
    animation: none;
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: top left;
    transition: mdc-animation-exit-temporary(transform, 250ms);
  }

  &__bar-inner {
    @include mdc-theme-prop(background-color, primary);

    animation: none;
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 100%;
  }

  &--accent .mdc-linear-progress__bar-inner {
    @include mdc-theme-prop(background-color, secondary);
  }

  &__buffering-dots {
    position: absolute;
    width: 100%;
    height: 100%;
    // SVG is optimized for data URI (https://codepen.io/tigt/post/optimizing-svgs-in-data-uris)
    // stylelint-disable-next-line function-url-quotes
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' enable-background='new 0 0 5 2' xml:space='preserve' viewBox='0 0 5 2' preserveAspectRatio='none slice'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23e6e6e6'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 10px 4px;
    animation: buffering 250ms infinite linear;
  }

  &__buffer {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: top left;
    transition: mdc-animation-exit-temporary(transform, 250ms);
    background-color: #e6e6e6;
  }

  &__secondary-bar {
    visibility: hidden;
  }

  &--indeterminate {
    .mdc-linear-progress__bar {
      transition: none;
    }

    .mdc-linear-progress__primary-bar {
      animation: primary-indeterminate-translate 2s infinite linear;
      left: -145.166611%;

      > .mdc-linear-progress__bar-inner {
        animation: primary-indeterminate-scale 2s infinite linear;
      }
    }

    .mdc-linear-progress__secondary-bar {
      animation: secondary-indeterminate-translate 2s infinite linear;
      left: -54.888891%;
      visibility: visible;

      > .mdc-linear-progress__bar-inner {
        animation: secondary-indeterminate-scale 2s infinite linear;
      }
    }
  }

  &--reversed {
    .mdc-linear-progress__bar,
    .mdc-linear-progress__buffer {
      right: 0;
      transform-origin: center right;
    }

    .mdc-linear-progress__primary-bar {
      animation-name: primary-indeterminate-translate-reverse;
    }

    .mdc-linear-progress__secondary-bar {
      animation-name: secondary-indeterminate-translate-reverse;
    }

    .mdc-linear-progress__buffering-dots {
      animation: buffering-reverse 250ms infinite linear;
    }
  }

  &--closed {
    opacity: 0;
  }
}

.mdc-linear-progress--indeterminate.mdc-linear-progress--reversed {
  .mdc-linear-progress__primary-bar {
    right: -145.166611%;
    left: auto;
  }

  .mdc-linear-progress__secondary-bar {
    right: -54.888891%;
    left: auto;
  }
}