.share-price {
  opacity: 1;
  transition: opacity $transition-duration--fast;
  // hide data to reduce content jump for dynamically loaded content
  &:not([class*='share-price--change']) {
    opacity: 0;
  }
  // provide height to reduce content jump for dynamically loaded content
  &:not([class*='share-price--change']) .share-price {
    &__current,
    &__history,
    &__info {
      height: $share-price-elements-height;
    }
  }

  &__current {
    @include font-style('title--s', 'title--l');

    span + span {
      margin-left: 5px;
    }
  }

  &__rate {
    color: $color-brand--three;
  }

  &__meta {
    @include font-style('body--l', 'title--m');
  }

  &__history,
  &__info {
    display: flex;
    flex-wrap: wrap;
  }

  &__history {
    margin-top: $spacing--xs;
  }

  &__info {
    margin-top: $spacing--xxs;
  }

  &__value {
    display: flex;
    flex-wrap: wrap;

    span:first-child {
      margin-right: 5px;
    }
  }

  &__company,
  &__value:first-child {
    margin-right: 30px;
  }
  // change : down
  &--change-down {
    .share-price__rate {
      color: $color--negative;
    }

    .icon {
      transform: rotate(180deg);
    }

    svg {
      fill: $color--negative;
    }
  }
}

// viewport l
@include viewport--l {
  .share-price {
    // provide height to reduce content jump for dynamically loaded content
    &:not([class*='share-price--change']) .share-price {
      &__current,
      &__history,
      &__info {
        height: $share-price-elements-height--l;
      }
    }

    &__history,
    &__info {
      margin-top: $spacing--s;
    }
  }
}

// background mappings
@include share-price-background-mapping;