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

/* Variables Custom */
$icon-pattern-bg: url('~media/icons/bg-title-icon.svg') !default;
$icon-pattern-bg-width-mobile: 5.5rem !default;
$icon-pattern-bg-height-mobile: 5.5rem !default;
$icon-pattern-icon-position-mobile: 0.5rem !default;

$icon-pattern-bg-width-desktop: 7rem !default;
$icon-pattern-bg-height-desktop: 7rem !default;
$icon-pattern-icon-position-desktop: 0.8rem !default;

$icon-pattern-2-bg: url('~media/icons/bg-title-icon-2.svg') !default;
$icon-pattern-2-bg-width-mobile: 4rem !default;
$icon-pattern-2-bg-height-mobile: 4rem !default;
$icon-pattern-2-icon-position-mobile: 0.7rem !default;
$icon-pattern-2-bg-width-desktop: 5rem !default;
$icon-pattern-2-bg-height-desktop: 5rem !default;
/**************************************/

.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: 2.8rem;
    text-shadow: -0.6rem 0 0 $white, 0 0.6rem 0 $white, 0 -0.6rem 0 $white, 0.1rem 0.1rem $white, -0.1rem -0.1rem 0 $white, 0.1rem -0.1rem 0 $white, -0.1rem 0.1rem 0 $white;
    transform: translateY(-50%);
  }
  svg {
    position: absolute;
    top: 50%;
    right: -$icon-pattern-icon-position-mobile;
    width: 2.5rem;
    height: 2.5rem;
    filter: drop-shadow(-0.4rem 0 0 $white) drop-shadow(0 0.4rem 0 $white) drop-shadow(0 -0.4rem 0 $white) drop-shadow(0.1rem 0.1rem $white) drop-shadow(-0.1rem -0.1rem 0 $white) drop-shadow(0.1rem -0.1rem 0 $white) drop-shadow(-0.1rem 0.1rem 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: 2rem;
    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: 3.5rem;
    }
    svg {
      right: -$icon-pattern-icon-position-desktop;
      width: 3.5rem;
      height: 3.5rem;
    }
  }

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

    .fa {
      font-size: 2.6rem;
    }
    svg {
      width: 3.2rem;
      height: 3.2rem;
    }
  }
}
