// @page Pattern Library/Components
// @name USPs
//
// @description 
// USPs (Unique Selling Points) are used within tables and on splash pages to highlight offers within a deal, and also to differentiate deals.
// General guidelines; There should only be one USP per deal. Text within USPs should be written in sentence case (not uppercase).
//
// @state .us-usp--blue - uSwitch related
// @state .us-usp--orange - Rewards (money/points)
// @state .us-usp--purple - Gifts eg. free TV
// @state .us-usp--yellow - Vouchers
// @state .us-usp--typecyan - Micro persuasions eg. most popular, half price
// @state .us-usp--green - Renewable and environmentally friendly
// @state .us-usp--navy - Generic vertical specific USP
// @state .us-usp--cyan - Generic vertical specific USP
// @state .us-usp--typegrey - Generic vertical specific USP
// @state .us-usp--red - Generic vertical specific USP
//
// @markup
//   <div class='us-usp {$modifiers}'>Shortened USP</div>
//   <div class='us-usp us-usp--annotated'>
//     <div class='us-usp {$modifiers}'>Annotated USP</div>
//     More information about USP goes here
//   </div>

$variants: (
  ('cyan', $c-cyan, $c-navy),
  ('typecyan', $c-typecyan),
  ('blue', $c-blue),
  ('navy', $c-navy),
  ('red', $c-red),
  ('green', $c-green),
  ('purple', $c-purple),
  ('orange', $c-orange),
  ('yellow', $c-yellow, $c-typegrey),
  ('typegrey', $c-typegrey)
) !default;

.us-usp {
  display: inline-block;
  padding: 0 10px;
  font-weight: bold;
  line-height: $base-line-ratio;
  color: #fff;
  text-align: center;
  background-color: $c-typecyan;
}

@each $colour in $variants {
  .us-usp--#{nth($colour, 1)} {
    background-color: #{nth($colour, 2)};

    @if length($colour) == 3 {
      color: #{nth($colour, 3)};
    }
  }
}

.us-usp--annotated {
  font-weight: normal;
  color: $c-typegrey;
  text-align: left;
  background-color: $c-bggrey;

  .us-usp {
    margin-right: 10px;
    margin-left: -10px;
  }
}