// @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}'>Unique Selling Point</div>
//   <div class='us-usp us-usp--annotated'>
//     <div class='us-usp {$modifiers}'>Annotated USP</div>
//     More information about USP goes here
//   </div>

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



@mixin usp-style($colour) {
  background-color: rgba(nth($colour, 2), .3);

  &:before {
    position: relative;
    left: -.55em;
    border-left: 4px solid nth($colour, 2);
    content: "";
    padding: .2em 0;
  }
}

.us-usp {
  @include usp-style(('blue', $c-dark-blue));

  display: inline-block;
  padding: .25em .75em;
  font-weight: 600;
  font-size: .875em;
  line-height: $base-line-ratio;
  color: $c-uswitch-navy;
  text-align: left;
}

@each $colour in $variants {
  .us-usp--#{nth($colour, 1)} {
    @include usp-style($colour);
  }
}

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

  &:before {
    border: 0;
  }

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