@import (reference) "colors";

@color--gray-darker: #363F4C;
@color--orange-darker: #F06A24;

.logo--large {
  height: 160px;
  width: 422px;
  display: block;

  .st0 {
    fill: @color--yellow;
  }
  .st1 {
    fill: @color--pink;
  }
  .st2 {
    fill: @color--blue;
  }
  .st3 {
    fill: @color--green;
  }
  .st4 {
    fill: @color--orange;
  }
  .st5 {
    fill: @color--orange-darker;
  }
  .st6 {
    fill: @color--gray-darker;
  }
  .st7 {
    fill: @color--purple;
  }

  &.m-light {
    .st6 {
      fill: @color--white;
    }
  }

  &.m-white {
    .st0,
    .st1,
    .st2,
    .st3,
    .st4,
    .st5,
    .st6,
    .st7 {
      fill: @color--white;
    }
  }
}

.logo--mark {
  height: 160px;
  width: 160px;
  display: block;

  .st0 {
    fill: @color--gray-darker;
  }

  .st1 {
    fill: @color--blue;
  }

  .st2 {
    fill: @color--orange-darker;
  }

  .st3 {
    fill: @color--orange;
  }

  &.m-light, &.m-white {
    .st0 {
      fill: @color--white;
    }
  }

  &.m-green {
    .st0 {
      fill: @color--white;
    }

    .st1 {
      fill: @color--green;
    }

    .st2 {
      fill: @color--blue;
    }

    .st3 {
      fill: @color--yellow;
    }
  }
}