@mixin ws-icon-arrow-down($color) {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' viewBox='0 0 25 16'%3E%3Cstyle%3E .st0%7Bfill:#{$color};%7D %3C/style%3E%3Cpath d='M12.5 15.1L0 2.6 1.8.9l10.7 10.7L23.2.9 25 2.6z' class='st0'/%3E%3C/svg%3E%0A");
  background-color: $color-white;
  background-repeat: no-repeat;
  background-size: $base-icon-size;
  height: $base-icon-size;
  width: $base-icon-size;
}

@mixin ws-icon-info($color) {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='23' viewBox='0 0 22 23'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect width='20.5' height='20.5' x='.75' y='1.20568023' stroke='#{$color}' stroke-width='1.5' rx='10.25'/%3E%3Cpath stroke='#{$color}' stroke-width='1.5' d='M9.7076823 9.153354h1.4245606v6.1730051'/%3E%3Cpath fill='#{$color}' stroke='#{$color}' stroke-width='1.5' d='M9.50056966 14.7962785h3.32655414'/%3E%3Cellipse cx='11' cy='6.06764604' fill='#{$color}' rx='1' ry='1'/%3E%3C/g%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: $base-icon-size;
  height: $base-icon-size;
  width: $base-icon-size;
}

@mixin ws-icon-three-dot-spinner($color) {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50px' height='50px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' class='uil-ellipsis'%3E%3Ccircle cx='16' cy='50' r='8' fill='#{$color}' transform='rotate%280 50 50%29'%3E%3Canimate id='anir11' attributeName='r' from='0' to='8' begin='0s;anir14.end' dur='0.3s' fill='freeze'/%3E%3Canimate id='anir12' attributeName='r' from='8' to='8' begin='anir11.end' dur='1.5s' fill='freeze'/%3E%3Canimate id='anir13' attributeName='r' from='8' to='0' begin='anir12.end' dur='0.3s' fill='freeze'/%3E%3Canimate id='anir14' attributeName='r' from='0' to='0' begin='anir13.end' dur='0.3s' fill='freeze'/%3E%3Canimate id='anix11' attributeName='cx' from='16' to='16' begin='0s;anix18.end' dur='0.3s' fill='freeze'/%3E%3Canimate id='anix12' attributeName='cx' from='16' to='16' begin='anix11.end' dur='0.3s' fill='freeze'/%3E%3Canimate id='anix13' attributeName='cx' from='16' to='50' begin='anix12.end' dur='0.3s' fill='freeze'/%3E%3Canimate id='anix14' attributeName='cx' from='50' to='50' begin='anix13.end' dur='0.3s' fill='freeze'/%3E%3Canimate id='anix8' attributeName='cx' from='50' to='84' begin='anix14.end' dur='0.3s' fill='freeze'/%3E%3Canimate id='anix16' attributeName='cx' from='84' to='84' begin='anix8.end' dur='0.3s' fill='freeze'/%3E%3Canimate id='anix17' attributeName='cx' from='84' to='84' begin='anix16.end' dur='0.3s' fill='freeze'/%3E%3Canimate id='anix18' attributeName='cx' from='84' to='16' begin='anix17.end' dur='0.3s' fill='freeze'/%3E%3C/circle%3E%3Ccircle cx='50' cy='50' r='8' fill='#{$color}' transform='rotate%280 50 50%29'%3E%3Canimate id='anir21' attributeName='r' from='8' to='8' begin='0s;anir25.end' dur='1.2s' fill='freeze'/%3E%3Canimate id='anir22' attributeName='r' from='8' to='0' begin='anir21.end' dur='0.3s' fill='freeze'/%3E%3Canimate id='anir23' attributeName='r' from='0' to='0' begin='anir22.end' dur='0.3s' fill='freeze'/%3E%3Canimate id='anir24' attributeName='r' from='0' to='8' begin='anir23.end' dur='0.3s' fill='freeze'/%3E%3Canimate id='anir25' attributeName='r' from='8' to='8' begin='anir24.end' dur='0.3s' fill='freeze'/%3E%3Canimate id='anix21' attributeName='cx' from='16' to='50' begin='0s;anix28.end' dur='0.3s' fill='freeze'/%3E%3Canimate id='anix22' attributeName='cx' from='50' to='50' begin='anix21.end' dur='0.3s' fill='freeze'/%3E%3Canimate id='anix23' attributeName='cx' from='50' to='84' begin='anix22.end' dur='0.3s' fill='freeze'/%3E%3Canimate id='anix24' attributeName='cx' from='84' to='84' begin='anix23.end' dur='0.3s' fill='freeze'/%3E%3Canimate id='anix25' attributeName='cx' from='84' to='84' begin='anix24.end' dur='0.3s' fill='freeze'/%3E%3Canimate id='anix26' attributeName='cx' from='84' to='16' begin='anix25.end' dur='0.3s' fill='freeze'/%3E%3Canimate id='anix27' attributeName='cx' from='16' to='16' begin='anix26.end' dur='0.3s' fill='freeze'/%3E%3Canimate id='anix28' attributeName='cx' from='16' to='16' begin='anix27.end' dur='0.3s' fill='freeze'/%3E%3C/circle%3E%3Ccircle cx='84' cy='50' r='8' fill='#{$color}' transform='rotate%280 50 50%29'%3E%3Canimate id='anir31' attributeName='r' from='8' to='8' begin='0s;anir35.end' dur='0.6s' fill='freeze'/%3E%3Canimate id='anir32' attributeName='r' from='8' to='0' begin='anir31.end' dur='0.3s' fill='freeze'/%3E%3Canimate id='anir33' attributeName='r' from='0' to='0' begin='anir32.end' dur='0.3s' fill='freeze'/%3E%3Canimate id='anir34' attributeName='r' from='0' to='8' begin='anir33.end' dur='0.3s' fill='freeze'/%3E%3Canimate id='anir35' attributeName='r' from='8' to='8' begin='anir34.end' dur='0.8999999999999999s' fill='freeze'/%3E%3Canimate id='anix31' attributeName='cx' from='50' to='84' begin='0s;anix38.end' dur='0.3s' fill='freeze'/%3E%3Canimate id='anix32' attributeName='cx' from='84' to='84' begin='anix31.end' dur='0.3s' fill='freeze'/%3E%3Canimate id='anix33' attributeName='cx' from='84' to='84' begin='anix32.end' dur='0.3s' fill='freeze'/%3E%3Canimate id='anix34' attributeName='cx' from='84' to='16' begin='anix33.end' dur='0.3s' fill='freeze'/%3E%3Canimate id='anix35' attributeName='cx' from='16' to='16' begin='anix34.end' dur='0.3s' fill='freeze'/%3E%3Canimate id='anix36' attributeName='cx' from='16' to='16' begin='anix35.end' dur='0.3s' fill='freeze'/%3E%3Canimate id='anix37' attributeName='cx' from='16' to='50' begin='anix36.end' dur='0.3s' fill='freeze'/%3E%3Canimate id='anix38' attributeName='cx' from='50' to='50' begin='anix37.end' dur='0.3s' fill='freeze'/%3E%3C/circle%3E%3Ccircle cx='84' cy='50' r='8' fill='#{$color}' transform='rotate%280 50 50%29'%3E%3Canimate id='anir41' attributeName='r' from='8' to='0' begin='0s;anir44.end' dur='0.3s' fill='freeze'/%3E%3Canimate id='anir42' attributeName='r' from='0' to='0' begin='anir41.end' dur='0.3s' fill='freeze'/%3E%3Canimate id='anir43' attributeName='r' from='0' to='8' begin='anir42.end' dur='0.3s' fill='freeze'/%3E%3Canimate id='anir44' attributeName='r' from='8' to='8' begin='anir43.end' dur='1.5s' fill='freeze'/%3E%3Canimate id='anix41' attributeName='cx' from='84' to='84' begin='0s;anix48.end' dur='0.3s' fill='freeze'/%3E%3Canimate id='anix42' attributeName='cx' from='84' to='16' begin='anix41.end' dur='0.3s' fill='freeze'/%3E%3Canimate id='anix43' attributeName='cx' from='16' to='16' begin='anix42.end' dur='0.3s' fill='freeze'/%3E%3Canimate id='anix44' attributeName='cx' from='16' to='16' begin='anix43.end' dur='0.3s' fill='freeze'/%3E%3Canimate id='anix45' attributeName='cx' from='16' to='50' begin='anix44.end' dur='0.3s' fill='freeze'/%3E%3Canimate id='anix46' attributeName='cx' from='50' to='50' begin='anix45.end' dur='0.3s' fill='freeze'/%3E%3Canimate id='anix47' attributeName='cx' from='50' to='84' begin='anix46.end' dur='0.3s' fill='freeze'/%3E%3Canimate id='anix48' attributeName='cx' from='84' to='84' begin='anix47.end' dur='0.3s' fill='freeze'/%3E%3C/circle%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: $base-icon-size;
  height: $base-icon-size;
  width: $base-icon-size;
}