/*
 * Shortcode: funfacts.scss
 * -----------------------------------------------
*/
.tm-sc-funfact {
  @include transition(all 0.3s ease);
  position: relative;
  .funfact-inner {
    .funfact-icon {
      display: inline-block;
      @include transition( all .3s ease-in-out);
      i {
        font-size: 45px;
        @include transition( all .3s ease-in-out);
      }
    }
    .counter {
      margin-top: 0;
      @include transition(all 0.3s ease);
      .animate-number {
        line-height: 1;
      }
    }
    .title {
      @include transition(all 0.3s ease);
    }
    &.funfact-lefticon {
      .details {
        margin-left: 60px;
      }
    }
  }
  &.funfact-iconleft {
    .element-left {
      float: left;
      margin-right: 1.5rem;
    }
  }
  &.funfact-iconright {
    @include media-breakpoint-up(md) {
      .funfact-inner {
          display: flex;
          flex-direction: row-reverse;
          align-items: center;
      }
      .element-right {
        margin-left: 2rem;
      }
      .details {
        text-align: right;
      }
    }
    @include media-breakpoint-down(md) {
      text-align: center;
    }
  }


  &.tm-animate-icon-on-hover {
    &:hover {
      &.animate-icon-rotate {
        .funfact-icon {
          transform: rotate(360deg);
        }
      }
      &.animate-icon-rotate-x {
        .funfact-icon {
          transform: rotateX(360deg);
        }
      }
      &.animate-icon-rotate-y {
        .funfact-icon {
          transform: rotateY(180deg);
        }
      }
      &.animate-icon-translate {
        .funfact-icon {
          transform: translate(-10px, 10px);
        }
      }
      &.animate-icon-translate-x {
        .funfact-icon {
          transform: translateX(-10px);
        }
      }
      &.animate-icon-translate-y {
        .funfact-icon {
          transform: translateY(-10px);
        }
      }
      &.animate-icon-scale {
        .funfact-icon {
          transform: scale(1.1);
        }
      }
    }
  }

  &.funfact-centered-in-responsive-mobile {
    &.funfact-iconleft {
      @include media-breakpoint-down(md) {
        text-align: center;
        .element-left {
          float: none;
          margin-right: 0;
          margin-bottom: 1rem;
          .funfact-icon {
            margin:0;
          }
        }
      }
    }
  }
}

.funfact-horizontal {
  .funfact-inner {
    @include media-breakpoint-down(md) {
      text-align: center;
    }
    .icon-wrapper {
      @include media-breakpoint-up(md) {
        float: left;
        margin-right: 1.5rem;
      }
      @include media-breakpoint-down(md) {
        margin-bottom: 10px;
      }
    }
    .details-wrapper {
      @include media-breakpoint-up(md) {
        display: flex;
        align-items: center;
      }
      .counter-wrapper {
        @include media-breakpoint-up(md) {
          margin-right: 1.5rem;
        }
      }
    }
  }
}