/**
 * Set custom typography sizes (e.g. header)
 * @param  {int} $size        font-size
 * @param  {int} $line-height line-height
 * @param  {int} $av          AV letter-spacing from XD
 * @return {void}
 */
/**
 * Converts a pixel, percentage, rem or em value to a unitless value based on a given font size. Ideal for working out unitless line heights.
 *
 * @param {Number} $value - Value to convert to a unitless line height
 * @param {Number} $base - The font size to use to work out the line height - defaults to $rem-font-size
 *
 * @return {Number} - Unitless number
 */
/**
 * AV letter spacing measurement convertor from Adobe applications
 * https://scotch.io/tutorials/converting-photoshop-letter-spacing-to-css
 */
:root,
body {
  --button-color: var(--wp--preset--color--blue-sky);
  --button-color-hover: var(--wp--preset--color--blue);
  --button-background-color: var(--wp--preset--color--white);
  --button-background-color-hover: var(--button-background-color);
  --button-border-color: var(--wp--preset--color--border);
  --button-border-color-hover: var(--wp--preset--color--border);
  --button-padding: 1.0714285714em 1.4285714286em;
  --button-radius: 0.1875rem;
  --button-shadow-active-color: rgba(0, 71, 125, 0.25);
  --button-shadow-focus-color: rgba(11, 87, 134, 0.05);
  --button-shadow-hover-color: var(--button-shadow-focus-color);
  --button-shadow-spread: 0.3125rem;
}

.wp-block-button__link {
  font-size: 0.875rem;
  line-height: 1.7857142857;
  letter-spacing: 0.15em;
  color: var(--button-color) !important;
  transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
  -webkit-user-select: none;
          user-select: none;
  display: inline-block;
  text-decoration: none;
  border: 1px solid var(--button-border-color) !important;
  padding: var(--button-padding);
  border-radius: var(--button-radius);
  text-align: left;
  text-transform: uppercase;
}
.wp-block-button__link:active {
  box-shadow: 0 0 0 var(--button-shadow-spread, 0) var(--button-shadow-active-color);
}
.wp-block-button__link:focus {
  box-shadow: 0 0 0 var(--button-shadow-spread, 0) var(--button-shadow-focus-color);
}
.wp-block-button__link:hover {
  box-shadow: 0 0 0 var(--button-shadow-spread, 0) var(--button-shadow-hover-color);
}
.wp-block-button__link.has-blue-sky-background-color:active, .wp-block-button__link.has-blue-sky-background-color:focus, .wp-block-button__link.has-blue-sky-background-color:hover {
  background-color: var(--wp--preset--color--blue) !important;
}
.wp-block-button__link.has-red-color {
  --button-border-color: var(--sht-color--red-25);
  --button-shadow-active-color: var(--sht-color--red-5);
  --button-shadow-focus-color: var(--sht-color--red-5);
  --button-shadow-hover-color: var(--sht-color--red-5);
}
.wp-block-button__link.has-green-color {
  --button-border-color: var(--sht-color--green-25);
  --button-shadow-active-color: var(--sht-color--green-5);
  --button-shadow-focus-color: var(--sht-color--green-5);
  --button-shadow-hover-color: var(--sht-color--green-5);
}
.wp-block-button__link:not(.has-background) {
  background-color: var(--button-background-color);
  border-color: var(--button-border-color);
}
.wp-block-button__link:not(.has-background):active, .wp-block-button__link:not(.has-background):focus, .wp-block-button__link:not(.has-background):hover {
  background-color: var(--button-background-color-hover);
  border-color: var(--button-border-color-hover);
}
.wp-block-button__link:active, .wp-block-button__link:focus, .wp-block-button__link:hover {
  color: var(--button-color-hover);
}
.wp-block-button.is-style-arrow .wp-block-button__link {
  padding-left: 4.5714285714em;
  background-image: url("../../../img/icons/button-arrow.min.svg");
  background-position: 1.4285714286em center;
  background-repeat: no-repeat;
}
.wp-block-button.is-style-arrow .wp-block-button__link:active, .wp-block-button.is-style-arrow .wp-block-button__link:focus, .wp-block-button.is-style-arrow .wp-block-button__link:hover {
  background-image: url("../../../img/icons/button-arrow-hover.min.svg");
}
.wp-block-button.is-style-arrow .wp-block-button__link.has-blue-sky-background-color, .wp-block-button.is-style-arrow .wp-block-button__link.has-red-background-color {
  background-image: url("../../../img/icons/button-arrow-white.min.svg");
}
.wp-block-button.is-style-arrow .wp-block-button__link.has-blue-sky-background-color:active, .wp-block-button.is-style-arrow .wp-block-button__link.has-blue-sky-background-color:focus, .wp-block-button.is-style-arrow .wp-block-button__link.has-blue-sky-background-color:hover, .wp-block-button.is-style-arrow .wp-block-button__link.has-red-background-color:active, .wp-block-button.is-style-arrow .wp-block-button__link.has-red-background-color:focus, .wp-block-button.is-style-arrow .wp-block-button__link.has-red-background-color:hover {
  background-image: url("../../../img/icons/button-arrow-white.min.svg");
}
.wp-block-button.is-style-arrow .wp-block-button__link.has-red-color {
  --button-border-color: var(--sht-color--red-25);
  --button-shadow-active-color: var(--sht-color--red-5);
  --button-shadow-focus-color: var(--sht-color--red-5);
  --button-shadow-hover-color: var(--sht-color--red-5);
  background-image: url("../../../img/icons/button-arrow-red.min.svg");
}
.wp-block-button.is-style-arrow .wp-block-button__link.has-red-color:active, .wp-block-button.is-style-arrow .wp-block-button__link.has-red-color:focus, .wp-block-button.is-style-arrow .wp-block-button__link.has-red-color:hover {
  background-image: url("../../../img/icons/button-arrow-red.min.svg");
}
.wp-block-button.is-style-external .wp-block-button__link {
  padding-left: 4.5714285714em;
  background-image: url("../../../img/icons/button-external.min.svg");
  background-position: 1.4285714286em center;
  background-repeat: no-repeat;
}
.wp-block-button.is-style-external .wp-block-button__link:active, .wp-block-button.is-style-external .wp-block-button__link:focus, .wp-block-button.is-style-external .wp-block-button__link:hover {
  background-image: url("../../../img/icons/button-external-hover.min.svg");
}
.wp-block-button.is-style-external .wp-block-button__link.has-blue-sky-background-color, .wp-block-button.is-style-external .wp-block-button__link.has-red-background-color {
  background-image: url("../../../img/icons/button-external-white.min.svg");
}
.wp-block-button.is-style-external .wp-block-button__link.has-blue-sky-background-color:active, .wp-block-button.is-style-external .wp-block-button__link.has-blue-sky-background-color:focus, .wp-block-button.is-style-external .wp-block-button__link.has-blue-sky-background-color:hover, .wp-block-button.is-style-external .wp-block-button__link.has-red-background-color:active, .wp-block-button.is-style-external .wp-block-button__link.has-red-background-color:focus, .wp-block-button.is-style-external .wp-block-button__link.has-red-background-color:hover {
  background-image: url("../../../img/icons/button-external-white.min.svg");
}
.wp-block-button.is-style-external .wp-block-button__link.has-red-color {
  --button-border-color: var(--sht-color--red-25);
  --button-shadow-active-color: var(--sht-color--red-5);
  --button-shadow-focus-color: var(--sht-color--red-5);
  --button-shadow-hover-color: var(--sht-color--red-5);
  background-image: url("../../../img/icons/button-external-red.min.svg");
}
.wp-block-button.is-style-external .wp-block-button__link.has-red-color:active, .wp-block-button.is-style-external .wp-block-button__link.has-red-color:focus, .wp-block-button.is-style-external .wp-block-button__link.has-red-color:hover {
  background-image: url("../../../img/icons/button-external-red.min.svg");
}
.wp-block-button.is-style-shopping .wp-block-button__link {
  --button-color: var(--sht-color--red);
  --button-color-hover: var(--sht-color--red);
  --button-border-color: var(--sht-color--red-25);
  --button-shadow-active-color: var(--sht-color--red-5);
  --button-shadow-focus-color: var(--sht-color--red-5);
  --button-shadow-hover-color: var(--sht-color--red-5);
  padding-left: 4.5714285714em;
  background-image: url("../../../img/icons/shopping-cart.min.svg");
  background-position: 1.4285714286em center;
  background-repeat: no-repeat;
}
.wp-block-button.is-style-shopping .wp-block-button__link.has-blue-sky-background-color {
  background-image: url("../../../img/icons/shopping-cart-white.min.svg");
}
.wp-block-button.is-style-shopping .wp-block-button__link.has-blue-sky-background-color:active, .wp-block-button.is-style-shopping .wp-block-button__link.has-blue-sky-background-color:focus, .wp-block-button.is-style-shopping .wp-block-button__link.has-blue-sky-background-color:hover {
  background-image: url("../../../img/icons/shopping-cart-white.min.svg");
}
.wp-block-button.is-style-voucher .wp-block-button__link {
  --button-color: var(--sht-color--red);
  --button-color-hover: var(--sht-color--red);
  --button-border-color: var(--sht-color--red-25);
  --button-shadow-active-color: var(--sht-color--red-5);
  --button-shadow-focus-color: var(--sht-color--red-5);
  --button-shadow-hover-color: var(--sht-color--red-5);
  padding-left: 4.5714285714em;
  background-image: url("../../../img/icons/voucher-red.min.svg");
  background-position: 1.4285714286em center;
  background-repeat: no-repeat;
}
.wp-block-button.is-style-voucher .wp-block-button__link.has-blue-sky-background-color {
  background-image: url("../../../img/icons/voucher-white.min.svg");
}
.wp-block-button.is-style-voucher .wp-block-button__link.has-blue-sky-background-color:active, .wp-block-button.is-style-voucher .wp-block-button__link.has-blue-sky-background-color:focus, .wp-block-button.is-style-voucher .wp-block-button__link.has-blue-sky-background-color:hover {
  background-image: url("../../../img/icons/voucher-white.min.svg");
}
.wp-block-button.is-style-webcam .wp-block-button__link {
  --button-color: var(--sht-color--blue);
  --button-color-hover: var(--sht-color--blue);
  --button-border-color: var(--sht-color--blue-25);
  --button-shadow-active-color: var(--sht-color--blue-5);
  --button-shadow-focus-color: var(--sht-color--blue-5);
  --button-shadow-hover-color: var(--sht-color--blue-5);
  padding-left: 4em;
  background-image: url("../../../img/icons/camera-blue.min.svg");
  background-position: 1em center;
  background-repeat: no-repeat;
  background-size: 2em;
}
.wp-block-button.is-style-webcam .wp-block-button__link.has-red-color {
  --button-color: var(--sht-color--red);
  --button-color-hover: var(--sht-color--red);
  --button-border-color: var(--sht-color--red-25);
  --button-shadow-active-color: var(--sht-color--red-5);
  --button-shadow-focus-color: var(--sht-color--red-5);
  --button-shadow-hover-color: var(--sht-color--red-5);
  background-image: url("../../../img/icons/camera-red.min.svg");
}
.wp-block-button.is-style-webcam .wp-block-button__link.has-blue-sky-color {
  --button-color: var(--sht-color--blue-sky);
  --button-color-hover: var(--sht-color--blue);
  --button-border-color: var(--sht-color--blue-25);
  --button-shadow-active-color: var(--sht-color--blue-5);
  --button-shadow-focus-color: var(--sht-color--blue-5);
  --button-shadow-hover-color: var(--sht-color--blue-5);
  background-image: url("../../../img/icons/camera-blue-sky.min.svg");
}