/*------------------------------------------------------------
ICONS
====================================*/

/* Variables Custom */
$icon-pattern-bg: url('~media/icons/bg-title-icon.svg');
$icon-pattern-bg-width-mobile: 55px;
$icon-pattern-bg-height-mobile: 55px;
$icon-pattern-icon-position-mobile: 5px;

$icon-pattern-bg-width-desktop: 70px;
$icon-pattern-bg-height-desktop: 70px;
$icon-pattern-icon-position-desktop: 8px;

$icon-pattern-2-bg: url('~media/icons/bg-title-icon-2.svg');
$icon-pattern-2-bg-width-mobile: 40px;
$icon-pattern-2-bg-height-mobile: 40px;
$icon-pattern-2-icon-position-mobile: 7px;
$icon-pattern-2-bg-width-desktop: 50px;
$icon-pattern-2-bg-height-desktop: 50px;
/**************************************/

.icon-pattern-wrapper {
  display: inline-block;
  position: relative;
  width: $icon-pattern-bg-width-mobile;
  height: $icon-pattern-bg-height-mobile;
  margin-right: $icon-pattern-icon-position-mobile;
  flex-shrink: 0;

  &::before {
    content: "";
    background: $icon-pattern-bg;
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 100%;
  }

  .fa {
    position: absolute;
    top: 50%;
    right: -$icon-pattern-icon-position-mobile;
    font-size: 28px;
    text-shadow: -6px 0 0 $white, 0 6px 0 $white, 0 -6px 0 $white, 1px 1px $white, -1px -1px 0 $white, 1px -1px 0 $white, -1px 1px 0 $white;
    transform: translateY(-50%);
  }
  svg {
    position: absolute;
    top: 50%;
    right: -$icon-pattern-icon-position-mobile;
    width: 25px;
    height: 25px;
    filter: drop-shadow(-4px 0 0 $white) drop-shadow(0 4px 0 $white) drop-shadow(0 -4px 0 $white) drop-shadow(1px 1px $white) drop-shadow(-1px -1px 0 $white) drop-shadow(1px -1px 0 $white) drop-shadow(-1px 1px 0 $white);
    transform: translateY(-50%);
  }
}

.icon-pattern-wrapper.pattern-2 {
  width: $icon-pattern-2-bg-width-mobile;
  height: $icon-pattern-2-bg-height-mobile;

  &::before {
    background: $icon-pattern-2-bg;
  }

  .fa {
    right: -$icon-pattern-2-icon-position-mobile;
    font-size: 20px;
    color: $secondary;
  }
  svg {
    right: -$icon-pattern-2-icon-position-mobile;
    fill: $secondary;
  }
}

/* RESPONSIVE */
/***************************************/
@include media-breakpoint-up(md) {
  .icon-pattern-wrapper {
    width: $icon-pattern-bg-width-desktop;
    height: $icon-pattern-bg-height-desktop;
    margin-right: $icon-pattern-icon-position-desktop;

    .fa {
      right: -$icon-pattern-icon-position-desktop;
      font-size: 35px;
    }
    svg {
      right: -$icon-pattern-icon-position-desktop;
      width: 35px;
      height: 35px;
    }
  }

  .icon-pattern-wrapper.pattern-2 {
    width: $icon-pattern-2-bg-width-desktop;
    height: $icon-pattern-2-bg-height-desktop;

    .fa {
      font-size: 26px;
    }
    svg {
      width: 32px;
      height: 32px;
    }
  }
}
