/*!*********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs/index.js??ruleSet[1].rules[1].use[3]!./app/client/source/styles/widgets/default/icon.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************/
/* --------------------------------------
Import variables and mixins
-------------------------------------- */
/* -----------------------------------------------------------
Font Families
----------------------------------------------------------- */
/* -----------------------------------------------------------
Grab the paragraph size and line height CSS variables
----------------------------------------------------------- */
/* -----------------------------------------------------------
Heading font-family map
----------------------------------------------------------- */
/* -----------------------------------------------------------
Font weight map
----------------------------------------------------------- */
/* -----------------------------------------------------------
Text transform
----------------------------------------------------------- */
/* -----------------------------------------------------------
Paragraph Text
----------------------------------------------------------- */
/* ----------------------------------------------------------------
Default Grid Settings
---------------------------------------------------------------- */
/* ----------------------------------------------------------------
Grid Helpers
---------------------------------------------------------------- */
/* --------------------------------------
Icon Widget
-------------------------------------- */
.default-icon-widget {
  background-color: var(--body-background-colour-on-contrast, #fff);
  border-radius: 0.5rem;
  overflow: hidden;
  margin-bottom: calc(var(--_row-gap, var(--default-gap, 3rem)) / 2);
}
.default-icon-widget:last-child {
  margin-bottom: 0;
}
.default-icon-widget__header, .default-icon-widget__main {
  padding: var(--_row-gap, var(--default-gap, 3rem));
}
@media only screen and (min-width: 640px) {
  .default-icon-widget__header, .default-icon-widget__main {
    padding: calc(var(--_row-gap, var(--default-gap, 3rem)) / 2);
  }
}
.default-icon-widget__header {
  position: relative;
  padding-bottom: 0;
}
.default-icon-widget__background {
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  padding-top: 150%;
  width: 300%;
  transform: translate(-50%, 0);
  color: var(--_primary-colour-contrast, var(--body-background-colour-contrast, #000));
  background-color: var(--_primary-colour, transparent);
}
.default-icon-widget__icon {
  position: relative;
}
.default-icon-widget__icon:before {
  content: "";
  display: block;
  position: relative;
  width: 18rem;
  height: 18rem;
  color: inherit;
  transition: color 0.3s ease;
  background-color: currentColor;
  -webkit-mask-image: var(--_icon-url);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: left bottom;
  -webkit-mask-size: contain;
  mask-image: var(--_icon-url);
  mask-repeat: no-repeat;
  mask-position: left bottom;
  mask-size: contain;
}
.default-icon-widget__icon img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.default-icon-widget__icon {
  position: relative;
  display: inline-block;
  width: 18rem;
  max-width: 100%;
  border-radius: 50%;
  overflow: hidden;
  color: var(--_secondary-colour-contrast, inherit);
  background-color: var(--_secondary-colour, transparent);
}
.default-icon-widget__icon:before {
  clip-path: circle(45% at 50% 50%);
  transform: scale(1.12);
}
.default-icon-widget__icon img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0 !important;
}
.default-icon-widget__main > :last-child {
  margin-bottom: 0;
}