.exchange-rate-display {
  @include H6;

  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: $Black-100;
  width: 100%;
  flex-wrap: wrap;

  span {
    margin-right: 4px;
  }

  &__bold {
    font-weight: bold;
  }

  &__switch-arrows {
    cursor: pointer;

    > svg {
      margin-top: 4px;
    }
  }

  &__switch-arrows-rotate {
    -webkit-animation-name: rotate-toggle;
    -webkit-animation-duration: 1s;
    -webkit-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
    -moz-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
    -o-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
    transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
    -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    -moz-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    -o-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  @-webkit-keyframes rotate-toggle {
    0% {
      -webkit-transform: rotate(0deg);
    }

    100% {
      -webkit-transform: rotate(180deg);
    }
  }

  &--white {
    color: $white;
  }
}