/**
 Colors
 */
/**
 Breakpoints
 */
/**
 Custom spacings
 */
/**
Fonts
 */
/**
 Font weights
 */
/**
 Borders
 */
@-webkit-keyframes bounceLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  50% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }
@keyframes bounceLeft {
  0% {
    transform: translateX(0); }
  50% {
    transform: translateX(-10px); }
  100% {
    transform: translateX(0); } }
@keyframes bounceRight {
  0% {
    transform: translateX(0); }
  50% {
    transform: translateX(10px); }
  100% {
    transform: translateX(0); } }
@-webkit-keyframes bounceRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  50% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }
/*
 *  get-spacer function
 *  Used to access spacer variable values for usage outside of margins and paddings (i.e. top, left, right, bottom)
 *  Usage: get-spacer($size, $bp);
 *  Example: get-spacer(mini, xs);
 *  Params: $size - spacer size needed
 *          $bp - breakpoint for spacer value
 *  Requires: $spacings and $breakpoints variables
 */
/*
 *  Breakpoints generator mixin
 *  Usage: bp($width) {@content;};
 *  Example: bp(xs) {...};
 *  Params: $width - corresponds to label of desired breakpoint from breakpoints var list
 *          @content - block with code to be included in the breakpoint
 *  Requires: $breakpoints variables
 */
/*
 *  Margin generator mixin
 *  Usage: margin($size, $sides);
 *  Example: margin(huge, top bottom left);
 *  Params: $size - corresponds to label of desired margin from margin var list
 *          $sides - single value or list with desired sides to apply margin to
 *  Requires: $margin and $breakpoints variables
 */
/*
 *  Padding generator mixin
 *  Used to fake margins when margin is not possible
 *  Usage: padding($size, $sides);
 *  Example: padding(huge, top bottom left);
 *  Params: $size - corresponds to label of desired margin from margin var list
 *          $sides - single value or list with desired sides to apply padding to
 *  Requires: $margin and $breakpoints variables
 */
/*
 *  Text styles mixin
 *  Usage: text($type);
 *  Example: text(p2);
 *  Params: $type - corresponds to label of desired text from fonts var list
 *  Requires: $fonts and $breakpoints variables
 */
/*
 *  font-awesome mixin
 *  Usage: font-awesome($unicode, $pseudo) {@content;};
 *  Example: font-awesome(f06a, before) {...};
 *  Params: $unicode - defines the font awesome icon
 *          $pseudo - defines after or before pseudo classes
 *  Requires: font awesome implemented
 */
/*
 *  font-awesome mixin
 *  Usage: font-awesome($unicode, $pseudo) {@content;};
 *  Example: font-awesome(f06a, before) {...};
 *  Params: $unicode - defines the font awesome icon
 *          $pseudo - defines after or before pseudo classes
 *  Requires: font awesome implemented
 */
.watchlist__success-message {
  position: fixed;
  display: none;
  top: 15vh;
  z-index: 9999;
  left: 50%;
  transform: translateX(-50%);
  min-width: 300px;
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.15) 0 5px 8px;
  padding: 10px; }
  @media screen and (min-width: 421px) {
    .watchlist__success-message {
      padding: 15px; } }
  @media screen and (min-width: 701px) {
    .watchlist__success-message {
      padding: 20px; } }
  @media screen and (min-width: 1001px) {
    .watchlist__success-message {
      padding: 25px; } }
  @media screen and (min-width: 1301px) {
    .watchlist__success-message {
      padding: 30px; } }
  .watchlist__success-message strong {
    font-family: "Source Sans Pro Bold"; }

.watchlist__success-close-button {
  margin-left: 15px;
  border: 0;
  box-shadow: none;
  background: none; }

.watchlist__amount-input {
  width: 50px;
  text-align: center; }

.watchlist__product-item {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start; }

.watchlist__product-meta {
  flex: 1;
  margin-left: 10px; }

.watchlist__product-image {
  width: 100px;
  height: 100px; }

.watchlist__product-name {
  font-family: "Source Sans Pro Bold";
  letter-spacing: normal; }
  @media screen and (min-width: 0px) {
    .watchlist__product-name {
      font-size: 14px;
      line-height: 18px; } }
  @media screen and (min-width: 421px) {
    .watchlist__product-name {
      font-size: 15px;
      line-height: 19px; } }
  @media screen and (min-width: 701px) {
    .watchlist__product-name {
      font-size: 16px;
      line-height: 21px; } }
  @media screen and (min-width: 1001px) {
    .watchlist__product-name {
      font-size: 16px;
      line-height: 24px; } }
  @media screen and (min-width: 1301px) {
    .watchlist__product-name {
      font-size: 16px;
      line-height: 30px; } }

.watchlist__product-description {
  margin-top: 10px; }

.watchlist__action-container {
  border-top: 1px solid #e9e9ea;
  padding-top: 10px;
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch; }
  @media screen and (min-width: 701px) {
    .watchlist__action-container {
      padding-top: 15px; } }
  @media screen and (min-width: 1001px) {
    .watchlist__action-container {
      padding-top: 20px; } }
  @media only screen and (min-width: 701px) {
    .watchlist__action-container {
      flex-flow: row nowrap;
      align-items: center; } }

.watchlist__action-left,
.watchlist__action-right {
  flex: 1;
  display: flex;
  align-items: stretch;
  flex-flow: column nowrap; }
  .watchlist__action-left button,
  .watchlist__action-right button {
    margin-top: 10px; }
  @media only screen and (min-width: 701px) {
    .watchlist__action-left,
    .watchlist__action-right {
      display: block; }
      .watchlist__action-left button,
      .watchlist__action-right button {
        margin-top: 0; } }

.watchlist__action-right {
  text-align: right; }

@media print {
  .watchlist__action-container {
    display: none; }

  .helper--noprint {
    display: none; }

  .watchlist__amount-input {
    border: 0;
    background: none; } }
.button--watchlist {
  min-width: 0;
  padding-left: 10px;
  padding-right: 10px;
  position: relative; }
  .button--watchlist > span {
    padding-left: 10px;
    font-family: "Source Sans Pro Bold"; }
    @media screen and (min-width: 701px) {
      .button--watchlist > span {
        padding-left: 15px; } }
    @media screen and (min-width: 1001px) {
      .button--watchlist > span {
        padding-left: 20px; } }
  .button--watchlist > i:before {
    margin-top: auto; }
  .button--watchlist:before {
    content: '';
    position: absolute;
    top: 0;
    left: 35px;
    bottom: 0;
    width: 1px;
    background: #e9e9ea;
    transition: all 0.2s; }
  .button--watchlist:hover:before {
    background: #58585a; }
  .button--watchlist:after {
    display: none; }

.watchlist-button-container {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px; }
  @media screen and (min-width: 701px) {
    .watchlist-button-container {
      margin-top: 15px;
      margin-bottom: 15px; } }
  @media screen and (min-width: 1001px) {
    .watchlist-button-container {
      margin-top: 20px;
      margin-bottom: 20px; } }

/*# sourceMappingURL=watchlist.css.map */