/*
 * Hex to RGB mapping for alpha reference
 * #7E7E7E -> rgb(126, 126, 126)
 * #423F3F -> rgb(66, 63, 63)
 * #4285F4 -> rgb(66, 133, 244)
 *  */

/* Default: CTA links to pages besides Config and PDP */
[wombat-template] .btn {
  border: 2px solid rgba(126, 126, 126, .3);
  transition: all 250ms cubic-bezier(0.1, 0.1, 0, 1);
  background-color: transparent;
  border-radius: 3px;
  color: #423F3F;
  padding: 6px 20px;
  text-align: center;
  font-size: 14px;
  position: relative;
  z-index: 1;
  display: inline-block;
}

[wombat-template] .btn::before {
  content: "";
  opacity: 0.0;
  transform-origin: center center;
  transform: scale3d(0.9, 0.65, 0.8);
  transition: all 250ms cubic-bezier(0.1, 0.1, 0, 1);
  position: absolute;
  top: -2px;
  right: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  border-radius: 3px;
  background-color: #423F3F;
  z-index: -1;
}

[wombat-template] .btn:hover::before {
  opacity: 1.0;
  transform: scale3d(1, 1, 1);
}

[wombat-template] .btn:focus {
  box-shadow: 0 0 0 3px rgba(126, 126, 126, .15);
  outline: none;
}

[wombat-template] .btn:hover {
  border-color: transparent;
  color: #fff;
}

/* CTA links to Product Config */
[wombat-template] .btn.cta-buy {
  background-color: #4285F4;
  border-color: #4285F4;
  color: #FFF;
}

[wombat-template] .btn.cta-buy:focus {
  box-shadow: 0 0 0 3px rgba(66, 133, 244, .15);
}

[wombat-template] .btn.cta-buy:hover {
  background-color: #423F3F;
  border-color: #423F3F;
  color: #fff;
}

/* CTA links to Product Overview Page */
[wombat-template] .btn.cta-shop {
  background-color: transparent;
  border-color: #4285F4;
  color: #4285F4;
}

[wombat-template] .btn.cta-shop::before {
  background-color: #4285F4;
}

[wombat-template] .btn.cta-shop:focus {
  box-shadow: 0 0 0 3px rgba(66, 133, 244, .15);
}

[wombat-template] .btn.cta-shop:hover {
  border-color: transparent;
  color: #FFF;
}

/* CTA links to Product Overview Page on dark / photo background */
[wombat-template] .btn.cta-shop-dark {
  background-color: rgba(66, 63, 63, 0.3);
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
}

[wombat-template] .btn.cta-shop-dark::before {
  background-color: #423F3F;
}

[wombat-template] .btn.cta-shop-dark:focus {
  box-shadow: 0 0 0 3px rgba(126, 126, 126, .15);
}

[wombat-template] .btn.cta-shop-dark:hover {
  background-color: #423f3f;
  border-color: #423f3f;
}


@media screen and (min-width: 768px) {
  [wombat-template] .btn {
    font-size: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}