[class*="fizz-icon"] {
  fill: currentColor;
}

.fizz-icon-12 {
  width: $icon-size-tiny;
  height: $icon-size-tiny;
}

.fizz-icon-16 {
  width: $icon-size-small;
  height: $icon-size-small;
}

.fizz-icon-24 {
  width: $icon-size-medium;
  height: $icon-size-medium;
}

.fizz-icon-32 {
  width: $icon-size-large;
  height: $icon-size-large;
}

.fizz-icon-48 {
  width: $icon-size-xlarge;
  height: $icon-size-xlarge;
}

.fizz-icon-inverse {
  fill: $color-white;
}

.fizz-icon-warning {
  fill: $color-icon-warning;
}

.fizz-icon-brand {
  fill: $color-icon-brand;
}

.fizz-icon-brand:hover {
  fill: $color-icon-brand-hover;
}

.fizz-icon-wordmark {
  width: 64px;
  height: 32px;
  stroke: transparent;
}

.fizz-social-icon {
  color: $color-icon-brand;
}

.fizz-social-icon:hover {
  color: $color-icon-brand-hover;
}

.fizz-icon-toggle button {
  color: $color-gray-400;
}

.fizz-icon-toggle .fizz-is-active {
  color: $color-icon-brand;
}

.fizz-icon-spinner,
.fizz-icon-spinner-small {
  display: inline-block;
  width: 120px;
  height: 120px;
  background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 170'%3E%3Cpath d='M126.68 41.84a60 60 0 10-83.359 86.32l3.334-3.453a55.199 55.199 0 0158.576-91.066 55.206 55.206 0 0118.115 11.651l3.334-3.453z' fill='%233CA9CD'/%3E%3Cpath d='M43.321 128.16a59.999 59.999 0 00101.67-44.207 59.996 59.996 0 00-18.311-42.114l-3.334 3.453a55.198 55.198 0 011.362 78.053 55.197 55.197 0 01-78.053 1.362l-3.334 3.453z' fill='%23EEFBFF'/%3E%3C/svg%3E");
  animation: spinner 1s linear infinite;
}

.fizz-icon-spinner-small {
  width: 40px;
  height: 40px;
}

@keyframes spinner {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.fizz-icon-logo {
  height: 24px;
  width: auto;
}

@media (min-width: $breakpoint-m) {
  .fizz-icon-logo {
    height: 39px;
  }
}

.fizz-flip-icon svg {
  transform: rotate(180deg);
}