@import '../settings/variables';

.c-forecast-chart-tooltip {
  &__text {
    &--title {
      color: $color-dark-grey;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      font-family: $font-maersk-headline;
      font-size: $font-size-medium;
      line-height: 1;
      margin: 0;
    }

    &--data {
      font-size: 1.25em;
      line-height: 1;
      color: $color-secondary-dark;
      margin-bottom: 0.125em;
    }

    &--info {
      font-size: $font-size-medium;
      line-height: 1;
      color: $color-secondary-dark;
      margin: 0;
      white-space: nowrap;
    }

    &--highlight {
      font-family: $font-maersk-headline;
      font-size: $font-size-medium;
      line-height: 1;
      color: $color-primary;
      margin: 0;
    }
  }

  &__text-badge {
    font-size: $font-size-medium;
    line-height: 1;
    margin: 0 0 0.125em 0.375em;

    &--increase {
      color: #A3BF00;
    }

    &--decrease {
      color: #FA381C;
    }

    &--stable {
      color: #00233D;
    }
  }

  &__badge{
    height: 1.25em;
    margin-left: 0.375em;
    border-radius: 4px;
    padding: 0 $gutter-tiny;

    &--increase {
      background: rgba(124, 157, 0, 0.1);
    }

    &--decrease {
      background: rgba(250, 56, 28, 0.1);
    }

    &--stable {
      background: #F7F8F9;
    }
  }
}