@import '../settings/variables';

$box-size: 1.09375rem;

.c-tce-money-trend {
  &__value {
    font-size: 1.25em;
    font-family: $font-maersk-text;
    font-weight: $font-weight-normal;
    line-height: 1.2em;
    color: $color-secondary-dark;
  }

  &__box {

    display: flex;
    flex: 0 0 $box-size;
    width: $box-size;
    height: $box-size;
    justify-content: center;
    align-items: center;
    border-radius: 0.25rem;
    background-color: $color-background-alternative;
    color: $color-secondary-dark;

    &--positive {
      background-color: $color-positive-indicator-background;
      color: $color-positive;
    }

    &--negative {
      background-color: $color-negative-indicator-background;
      color: $color-negative;
    }
  }

  &__icon {
    font-size: 0.6em;
    padding-top: 1px;
  }

  &__label {
    padding-left: $box-size + 0.5rem;
  }
}