@import '../settings/variables';
@import '../utilities/utils';
@import '../tools/mixins/breakpoints';

$vessel-consumption-virtual-color: $color-primary;
$compliant-color: $color-primary-dark;

.c-bunker-adjustment-trends-legend {
  margin-right: 0.625em;
  margin-bottom: $margin-normal;
  
  &__label { 
    display: flex;
    align-items: baseline;
    text-transform: uppercase;
    font-family: $font-maersk-headline;
    font-weight: $font-weight-bold;
    font-size: $font-size-medium;

    &:before {
      content: "";
      display: inline-block;
      margin-right: $margin-normal;
      @include dot(0.75em);
    }

    &--vessel-consumption:before {
      background: $color-trends-vessel-consumption;
    }

    &--virtual-consumption:before {
      background: $vessel-consumption-virtual-color;
    }

    &--compliant:before {
      background: $compliant-color;
    }

    &--non-compliant:before {
      background: $color-trends-non-compliant;
    }
  }
}