@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;

/* ==========================================================================
   Design System
   Icons
   ========================================================================== */

.cf-icon-svg {
  height: $cf-icon-height;
  vertical-align: middle;
  fill: currentcolor;

  &--updating,
  &--updating-round {
    animation: updating-animation 1.25s infinite linear;
    transform-origin: 50% 50%;
  }
}

@keyframes updating-animation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

// Right-to-left (RTL) certain icons on arabic pages.
html[lang='ar'] {
  .cf-icon-svg {
    &--right,
    &--right-round,
    &--left,
    &--left-round,
    &--arrow-right,
    &--arrow-right-round,
    &--arrow-left,
    &--arrow-left-round,
    &--help,
    &--help-round,
    &--book,
    &--book-round,
    &--document,
    &--document-round,
    &--edit,
    &--edit-round,
    &--paper-clip,
    &--paper-clip-round,
    &--cart,
    &--cart-round,
    &--disability,
    &--disability-round,
    &--travel,
    &--travel-round,
    &--bullhorn,
    &--bullhorn-round,
    &--chart,
    &--chart-round,
    &--list,
    &--list-round,
    &--external-link,
    &--external-link-round {
      transform: scaleX(-1);
    }
  }
}