/*
 * Shortcode: Icon Boxes
 * -----------------------------------------------
*/
.icon-box {
  $icon-box: &;
  position: relative;
  //margin-bottom: 30px;
  z-index: 0;
  @include transition(all .4s ease);
  .icon-wrapper {
    //margin-bottom: 20px;
    position: relative;
    z-index: 0;
    .icon-bg-img {
      position: absolute;
      width: 100px;
      z-index: -1;
      @include transition(all .3s ease);
      img {
        width: 100%;
        @include transition(all .3s ease);
      }
    }
  }

  .icon {
    $icon: &;
    display: inline-block;
    height: 70px;
    margin-bottom: 0;
    @include transition(all .3s ease);
    width: 70px;
    text-align: center;
    font-weight: normal;

    i {
      display: inline-block;
      font-size: 30px;
      line-height: 70px;
    }

    i[class*="pe-7s-"] {
      vertical-align: text-bottom;
    }

    // Icon Default
    &.icon-default {
      height: 50px;
      width: 50px;
      margin-bottom: 5px;
      i {
        line-height: 40px;
      }
    }

    // Icon gray
    &.icon-gray {
      background-color: $gray-eee;
      color: $black-333;

      //icon bordered
      &.icon-bordered {
        background-color: transparent;
        border: 3px solid $gray-eee;

      }
      
      @at-root {
        #{$icon-box}:hover .icon {
          &.icon-gray {
            background-color: darken($gray-eee, 10%);
            color: $black-111;

            //icon bordered
            &.icon-bordered {
              background-color: $gray-eee;
              color: $black-555;
            }
          }
        }
      }
    }

    // Icon dark
    &.icon-dark {
      background-color: $black-111;
      color: $white-base;

      //icon bordered
      &.icon-bordered {
        background-color: transparent;
        border: 3px solid $black-111;
        color: $black-111;
      }
      
      @at-root {
        #{$icon-box}:hover .icon {
          &.icon-dark {
            background-color: $gray-eee;
            color: $black-111;

            //icon bordered
            &.icon-bordered {
              background-color: $black-111;
              border-color: $black-111;
              color: $white-base;
            }
          }
        }
      }
    }

    // Icon dark
    &.icon-white {
      background-color: $white-base;
      color: $black-333;

      //icon bordered
      &.icon-bordered {
        background-color: transparent;
        border: 3px solid $white-base;
      }
      
      @at-root {
        #{$icon-box}:hover .icon {
          &.icon-white {
            background-color: darken($white-base, 20%);
            color: darken($black-333, 20%);

            //icon bordered
            &.icon-bordered {
              background-color: $white-base;
              border-color: $white-base;
              color: $black-111;
            }
          }
        }
      }

      // Icon white border effect
      &.icon-border-effect {
        position: relative;

        &::after {
          box-shadow: 0 0 0 3px $white-base;
        }
      }
    }

    // Icon bordered
    &.icon-bordered {
      border: 3px solid $gray-eee;
      
      @at-root {
        #{$icon-box}:hover .icon {
          &.icon-bordered {
            background-color: $gray-eee;
            color: $black-111;
          }
        }
      }
    }

    // Icon rounded
    &.icon-rounded {
      border-radius: 3px;   
    }

    // Icon rounded
    &.icon-circled {
      border-radius: 50%;
    }

    //icon type iamge
    &.icon-type-image {
      &.icon-bordered {
        padding: 5px;
      }
    }

    //icon type iamge
    &.icon-type-icon-text {
      .icon-text {
        @include transition(all 0.3s ease);
      }
    }

    // Icon xs
    &.icon-xs {
      height: 30px;
      width: 30px;

      i {
        font-size: 18px;
        line-height: 30px;
      }
    }

    // Icon sm
    &.icon-sm {
      height: 50px;
      width: 50px;

      i {
        font-size: 22px;
        line-height: 50px;
      }
    }

    // Icon md
    &.icon-md {
      height: 75px;
      width: 75px;

      i {
        font-size: 36px;
        line-height: 75px;
      }
    }

    // Icon lg
    &.icon-lg {
      height: 90px;
      width: 90px;

      i {
        font-size: 48px;
        line-height: 90px;
      }
    }

    // Icon xl
    &.icon-xl {
      height: 120px;
      width: 120px;

      i {
        font-size: 60px;
        line-height: 120px;
      }
    }

    // Icon border effect
    &.icon-border-effect {
      position: relative;

      &::after {
        border-radius: 50%;
        box-shadow: 0 0 0 3px ;
        box-sizing: content-box;
        content: "";
        height: 100%;
        left: -4px;
        opacity: 0;
        padding: 4px;
        top: -4px;
        transform: scale(0.8);
        transition: transform 0.3s ease 0s, opacity 0.3s ease 0s;
        pointer-events: none;
        position: absolute;
        width: 100%;
      }

      &.effect-flat {
        &::after {
          border-radius: 0;
        }
      }

      &.effect-rounded {
        &::after {
          border-radius: 3px;
        }
      }

      &.effect-circled {
        &::after {
          border-radius: 50%;
        }
      }
      // Icon gray
      &.icon-gray {
        &::after {
          box-shadow: 0 0 0 3px $gray-lighter;
        }
      }
    }

    // Icon border effect
    &.icon-top {
      left: 0;
      margin: 0 auto;
      position: absolute;
      right: 0;
      top: -32px;
    }
  }


  //icon image type alignment
  .icon {
    &.icon-type-image {
      display: block;
      text-align: left;
    }
  }
  &.text-center {
    .icon {
      &.icon-type-image {
        text-align: center;
        display: inline-block;
      }
    }
  }
  &.text-right {
    .icon {
      &.icon-type-image {
        text-align: right;
        display: inline-block;
      }
    }
  }

  // iconbox border
  &.iconbox-border {
    border: 3px solid $gray-gainsboro;
  }

  // iconbox bg
  &.iconbox-bg {
    background-color: $white-fa;

    &.iconbox-bg-dark {
      background-color: $black-333;
    }
  }
  .content {
    @include transition(all .3s ease);
    p {
      @include transition(all .3s ease);
      margin-bottom: 0;
    }
    a {
      color: $text-color;
      font-weight: $body-font-weight;
    }
  }

  &.icon-left {
    .icon-box-wrapper {
      display: flex;
    }
    .icon {
      margin-right: 20px;
      &.no-bg {
        width: auto;
        height: auto;
      }
      &.icon-default {
        margin-right: 10px;
      }
    }
    .icon-text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
      .icon-box-title,
      .icon-box-title a {
        margin-bottom: 0;
        margin-top: 0;
      }
    }
  }

  &.icon-right {
    .icon-box-wrapper {
      display: flex;
      flex-direction: row-reverse;
    }
    .icon {
      margin-left: 20px;
      &.no-bg {
        width: auto;
        height: auto;
      }
      &.icon-default {
        margin-left: 10px;
      }
    }
    .icon-text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
      .icon-box-title,
      .icon-box-title a {
        margin-bottom: 0;
        margin-top: 0;
      }
    }
  }

  .icon-box-title,
  .icon-box-title a {
    @include transition(all .3s ease);
  }
  .btn-view-details {
    @include transition(all .3s ease);
    margin-top: 15px;
  }

  &:hover {
    .icon-border-effect {
      &::after {
        opacity: 1;
        transform: scale(1);
      }
    }
  }

  .icon-border-effect {
    &:hover {
      &::after {
        opacity: 1;
        transform: scale(1);
      }
    }
  }

  &.iconbox-box-shadow {
    @include box-shadow( 0px 0px 50px rgba(5, 5, 5, 0.08) );
    &:hover {
      @include box-shadow( 0px 0px 50px rgba(5, 5, 5, 0.15) );
    }
  }

  &.iconbox-box-shadow-on-hover {
    &:hover {
      @include box-shadow( 0px 0px 50px rgba(5, 5, 5, 0.15) );
    }
  }

  &.iconbox-default-padding {
    .icon-box-wrapper {
      padding: 50px 35px 50px 35px;
    }
  }

  &.iconbox-centered-in-responsive-tablet {
    @media (max-width: $ele-breakpoint-tablet-max) {
      text-align: center !important;
      .icon {
        margin-left: auto;
        margin-right: auto;
        &.icon-type-image {
          text-align: center !important;
        }
      }
      &.icon-left {
        .icon-box-wrapper {
          display: block;
        }
        .icon {
          &.icon-default {
            margin-right: auto;
            margin-left: auto;
          }
        }
      }
      &.icon-right {
        .icon-box-wrapper {
          display: block;
        }
        .icon {
          &.icon-default {
            margin-right: auto;
            margin-left: auto;
          }
        }
      }
    }
  }

  &.iconbox-centered-in-responsive-mobile {
    @include media-breakpoint-down(md) {
      text-align: center !important;
      .icon {
        margin-left: auto;
        margin-right: auto;
        &.icon-type-image {
          text-align: center !important;
        }
      }
      &.icon-left {
        .icon-box-wrapper {
          display: block;
        }
        .icon {
          &.icon-default {
            margin-right: auto;
            margin-left: auto;
          }
        }
      }
      &.icon-right {
        .icon-box-wrapper {
          display: block;
        }
        .icon {
          &.icon-default {
            margin-right: auto;
            margin-left: auto;
          }
        }
      }
    }
  }

  &.iconbox-title-mt-0-desktop {
    .icon-box-title {
      @include media-breakpoint-up(xl) {
        margin-top: 0;
      }
    }
  }

  &.iconbox-hover-move-up-animation {
    &:hover {
      margin-top: -15px;
    }
  }

  &.iconbox-border-radius {
    border-radius: 10px;
  }

  &.icon-position-icon-top {
    &.hanging-icon-top {
      .icon-wrapper {
        .icon {
          margin-top: -70px;
        }
      }
    }
  }
  &.animate-icon-on-hover {
    &:hover {
      &.animate-icon-rotate {
        .icon-wrapper {
          .icon {
            transform: rotate(360deg);
          }
        }
      }
      &.animate-icon-rotate-x {
        .icon-wrapper {
          .icon {
            transform: rotateX(360deg);
          }
        }
      }
      &.animate-icon-rotate-y {
        .icon-wrapper {
          .icon {
            transform: rotateY(180deg);
          }
        }
      }
      &.animate-icon-translate {
        .icon-wrapper {
          .icon {
            transform: translate(-10px, 10px);
          }
        }
      }
      &.animate-icon-translate-x {
        .icon-wrapper {
          .icon {
            transform: translateX(-10px);
          }
        }
      }
      &.animate-icon-translate-y {
        .icon-wrapper {
          .icon {
            transform: translateY(-10px);
          }
        }
      }
      &.animate-icon-scale {
        .icon-wrapper {
          .icon {
            transform: scale(1.1);
          }
        }
      }
    }
  }

  &.icon-area-box-shadow {
    .icon-wrapper {
      .icon {
        @include box-shadow( 0px 0px 50px rgba(5, 5, 5, 0.08) );
      }
    }
  }

  &.iconbox-style1-current-theme-animation {
  }

  &.iconbox-style2-border-bottom {
    &:after {
      background-color: #aaa; 
      position: absolute;
      bottom: -3px;
      left: 0;
      width: 100%;
      height: 4px;
      content: '';
      opacity: 0;
      transition: 0.3s ease-in;
    }
    &:hover {
      &:after {
        bottom: 0;
        opacity: 1;
      }
    }
  }

  &.iconbox-style3-moving-border-bottom {
    overflow: hidden;
    &:after {
      position: absolute;
      left: -2px;
      bottom: 0px;
      width: 100%;
      height: 4px;
      content: '';
      background-image: -moz-linear-gradient(0deg, #313131 0%, #bdc0c3 100%);
      background-image: -webkit-linear-gradient(0deg, #313131 0%, #bdc0c3 100%);
      background-image: -ms-linear-gradient(0deg, #313131 0%, #bdc0c3 100%);
      -ms-transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
      visibility: hidden;
      opacity: 0;
      @include transition(all 0.5s ease-in);
    }

    &:hover:after {
      -ms-transform: translateX(0%);
      -webkit-transform: translateX(0%);
      transform: translateX(0%);
      visibility: visible;
      opacity: 1;
    }
  }

  &.iconbox-style4-bgcolor {
    overflow: hidden;

    &:before {
      position:absolute;
      content:'';
      left:0px;
      top:0px;
      width:100%;
      height:100%;
      opacity:0;
      visibility:hidden;
      background-color:#161d29;
      @include transition(all 500ms ease);
      z-index: -1;
    }

    &:hover {
      &:before {
        opacity:1;
        visibility:visible;
      }
      .icon-box-title,
      .icon-box-title a {
        color: #fff;
      }
      .content {
        color: #fff;
        p {
          color: #fff;
        }
      }
    }
  }

  &.iconbox-style5-moving-bgcolor {
    overflow: hidden;

    &:before {
      position:absolute;
      content:'';
      left:0px;
      top:0px;
      width:100%;
      height:100%;
      opacity:0;
      visibility:visible;
      background-color:#161d29;
      @include transition(all 500ms ease);
      -webkit-transform:scaleY(0);
      -ms-transform:scaleY(0);
      -moz-transform:scaleY(0);
      transform:scaleY(0);
      -webkit-transform-origin:top;
      -ms-transform-origin:top;
      -moz-transform-origin:top;
      transform-origin:top;
      z-index: -1;
    }

    &:hover {
      &:before {
        opacity:1;
        visibility:visible;
        -webkit-transform:scaleY(1);
        -ms-transform:scaleY(1);
        -moz-transform:scaleY(1);
        transform:scaleY(1);
      }
      .icon-box-title,
      .icon-box-title a {
        color: #fff;
      }
      .content {
        color: #fff;
        p {
          color: #fff;
        }
      }
    }
    .icon:hover {
      color: #fff;
    }
  }

  &.iconbox-style6-moving-double-bgcolor {
    overflow: hidden;

    &:before,
    &:after {
      position:absolute;
      content:'';
      left:0px;
      top:0px;
      width:100%;
      height:100%;
      opacity:0;
      visibility:visible;
      background-color:#475469;
      @include transition(all 400ms ease);
      -webkit-transform:scaleY(0);
      -ms-transform:scaleY(0);
      -moz-transform:scaleY(0);
      transform:scaleY(0);
      -webkit-transform-origin:top;
      -ms-transform-origin:top;
      -moz-transform-origin:top;
      transform-origin:top;
      z-index: -2;
    }
    &:after {
      background-color:#141d2b;
      z-index: -1;
    }

    &:hover {
      &:before,
      &:after {
        opacity:1;
        visibility:visible;
        -webkit-transform:scaleY(1);
        -ms-transform:scaleY(1);
        -moz-transform:scaleY(1);
        transform:scaleY(1);
      }
      &:after {
        -webkit-transition-delay: 300ms;
        -moz-transition-delay: 300ms;
        -ms-transition-delay: 300ms;
        -o-transition-delay: 300ms;
        transition-delay: 300ms;
      }
      .icon-box-title,
      .icon-box-title a {
        color: #fff;
      }
      .content {
        color: #fff;
        p {
          color: #fff;
        }
      }
    }
  }

  &.iconbox-style7-hover-moving-border {
    overflow: hidden;
    &:after,
    &:before {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      content: '';
      opacity: 0;
      -webkit-transition: opacity 0.55s,-webkit-transform 0.55s;
      transition: opacity 0.55s,transform 0.55s;
      z-index: -1;
    }
    &:after {
      border-right: 2px solid #444;
      border-left: 2px solid #444;
    }
    &:after {
      -webkit-transform: scale(1,0);
      transform: scale(1,0);
    }
    &:before {
      border-top: 2px solid #444;
      border-bottom: 2px solid #444;
    }
    &:before {
      -webkit-transform: scale(0,1);
      transform: scale(0,1);
    }

    &:hover {
      &:before,
      &:after {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    }
  }

  .bg-shadow-icon {
    position: absolute;
    right: -30px;
    bottom: 0px;
    font-size: 8rem;
    line-height: 1;
    color: #687f9b;
    //transform: rotate(-45deg);
    opacity: 0.25;
    @include transition(all .3s ease);
  }


  &.iconbox-bg-img-on-hover {
    overflow: hidden;
    .bg-img-wrapper {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      @include scale(1);
      @include transition(all .3s ease);
      &:before, &:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        @include transition(all .3s ease);
      }
      &:before {
        background-image: url("../images/shadow-overlay2.png");
        background-position: center bottom;
        z-index: 1;
        background-repeat: no-repeat;
      }
      &:after {
        background-color: rgba(0, 0, 0, 0.45);
        z-index: 2;
      }
    
      @at-root {
        #{$icon-box} {
          &.iconbox-bg-img-on-hover:hover {
            .bg-img-wrapper {
              opacity: 1;
              @include scale(1.1);
            }

            .icon {
              color: #fff;
              i {
                color: #fff;
              }
            }
            .icon-box-title,
            .icon-box-title a {
              color: #fff;
            }
            .content {
              color: #fff;
              p {
                color: #fff;
              }
            }
          }
        }
      }
    }
    .icon-box-wrapper {
      position: relative;
      z-index: 99;
    }
    &.iconbox-bg-img-on-hover-always-visible {
      .bg-img-wrapper {
        opacity: 1;
      }
    }
  }

  &.tm-iconbox-icontype-svg-image {
    .icon-type-svg-image {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .tm-vivus-svg-animation {
      width: 128px;
      height: auto;
    }
  }
  &.icon-position-icon-left-style2 {
    .icon-box-wrapper {
      display: block;
    }
    .icon {
      &.icon-default {
        height: auto;
        width: auto;
        margin-bottom: 5px;
        margin-right: 20px;
        i {
          line-height: 1;
        }
      }
    }
  }
}