/*
Copyright (c) 2018-2019 Uber Technologies, Inc.

This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
import { styled } from '../styles/index.js';
import { getSvgStyles } from '../icon/styled-components.js';
const spin = {
  from: {
    transform: 'rotate(0deg)'
  },
  to: {
    transform: 'rotate(360deg)'
  }
};
/**
 * Spinner icon overrides
 */

export const Svg = styled('svg', props => {
  const {
    $theme,
    $color
  } = props;
  return { ...getSvgStyles(props),
    fill: $color || $theme.colors.accent,
    cursor: 'wait',
    animationName: spin,
    animationDuration: $theme.animation.timing1000,
    animationIterationCount: 'infinite',
    animationTimingFunction: 'linear'
  };
});
Svg.displayName = "Svg";
export const StyledTrackPath = styled('path', props => ({
  fill: props.$theme.colors.spinnerTrackFill,
  opacity: 0.16
}));
StyledTrackPath.displayName = "StyledTrackPath";
export const StyledActivePath = styled('path', props => ({
  fill: props.$color || props.$theme.colors.accent
}));
StyledActivePath.displayName = "StyledActivePath";