/**
 * @license
 * Copyright Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
@use 'sass:list';
@use './token-utils' as *;

@forward './token-utils';

@mixin container {
  display: block;
  position: relative;
  min-inline-size: 80px;
  block-size: #{token(track-height)};
  content-visibility: auto;
  contain: strict;
}

@mixin progress {
  inset: 0;
  outline: transparent solid 1px;
  border-radius: #{token(track-shape)};
  overflow: hidden;
  display: flex;
  align-items: center;
}

@mixin bar {
  animation: none;
  inline-size: 100%;
  block-size: #{token(indicator-height)};
  transform-origin: left center;
  will-change: transform;
  transition: transform #{token(determinate-duration)} #{token(determinate-easing)};
}

@mixin secondary-bar {
  display: none;
}

@mixin bar-inner {
  inset: 0;
  animation: none;
  transition: background-color #{token(theme-transition-duration)} #{token(theme-transition-timing)};
  background: #{token(indicator-color)};
}

@mixin dots {
  inset: 0;
  animation: linear infinite #{token(buffer-duration)};
  animation-name: buffering;
  background-color: #{token(track-color)};
  background-repeat: repeat-x;
  mask-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 2' preserveAspectRatio='xMinYMin slice'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/svg%3E");
  z-index: -1;
}

@mixin track {
  inset: 0;
  will-change: transform;
  background: #{token(track-color)};
  transition: transform #{token(determinate-duration)} #{token(determinate-easing)},
              background-color #{token(theme-transition-duration)} #{token(theme-transition-timing)};
  transform-origin: left center;
}

@mixin indeterminate-bar {
  transition: none;
}

@mixin indeterminate-primary-bar {
  inset-inline-start: -145.167%;
  will-change: transform;
  animation: linear infinite #{token(indeterminate-duration)};
  animation-name: primary-indeterminate-translate;
}

@mixin indeterminate-secondary-bar {
  inset-inline-start: -54.8889%;
  display: block;
  will-change: transform;
  animation: linear infinite #{token(indeterminate-duration)};
  animation-name: secondary-indeterminate-translate;
}

@mixin indeterminate-dots {
  display: none;
}

@mixin indeterminate-primary-bar-inner {
  will-change: transform;
  animation: linear infinite #{token(indeterminate-duration)} primary-indeterminate-scale;
}

@mixin indeterminate-secondary-bar-inner {
  will-change: transform;
  animation: linear infinite #{token(indeterminate-duration)} secondary-indeterminate-scale;
}
