/*
 * Shortcode: animated-layer-advanced.scss
 * -----------------------------------------------
*/
.tm-sc-animated-layer-advanced {
  position: relative;
  max-width: 100%;
  .animated-layer-advanced-inner {
    .layer-image-wrapper {
      position: relative;
      display: block;
      width: inherit;
      max-width: 100%;
      height: inherit;
      max-height: 100%;
      background-size: cover;
      background-repeat: no-repeat;
      &:not(:first-child) {
        position: absolute;
      }
      &.layer-text {
        @include transition(all .3s ease);
        img {
          margin: 0;
        }
        &:after {
          content: "";
          height: 100%;
          left: 0;
          position: absolute;
          top: 0;
          width: 100%;
          z-index: -1;
          @include transition(all .3s ease);
        }
      }
      .layer-image {
        transition: all 1s ease; 
        transition-delay: 700ms;
        display: inline-block;
        position: relative;
        .layer-image-inner-wrapper {
          overflow: hidden;
          position: relative;
          &:before{
            position: absolute;
            top: 0;
            left: -100%;
            display: block;
            content: '';
            width: 50%;
            height: 100%;
            background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
            background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, .3)));
            background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
            -webkit-transform: skewX(-25deg);
            -ms-transform: skewX(-25deg);
            transform: skewX(-25deg);
            @include transition(all .3s ease);
          }
          &:hover:before{
            -webkit-animation: shine 1s;
            animation: shine 1s;
          }
        }
      }
      &.box-shadow-around-img {
        @include box-shadow( 0px 0px 40px rgba(5, 5, 5, 0.15) );
      }
      &.layer-image-fullwidth {
        .layer-image {
          display: block;
        }
        img {
          width: 100%;
        }
      }
      .layer-animated-icon {
        width: 80px;
        height: 80px;
        line-height: 80px;
        border-radius: 50%;
        background: var(--theme-color1);
        text-align: center;
        &:before {
          position: absolute;
          content: '';
          width: 140px;
          height: 140px;
          background: url("../../assets/images/icon-box/dotted-border.png") no-repeat center;
          left: -30px;
          top: -30px;
          -webkit-animation:spin 10s linear infinite;
          -moz-animation:spin 10s linear infinite;
          animation:spin 10s linear infinite;
          @include transition(all .3s ease);
        }
        .icon {
          width: 48px;
          opacity: 1;
          visibility: visible;
          @include transition(all .3s ease);
        }
        .icon-hover {
          width: 48px;
          opacity: 0;
          visibility: hidden;
          position: absolute;
          left: 50%;
          top: 50%;
          -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          @include transition(all .3s ease);
        }
        &:hover {
          background: var(--theme-color2);
          .icon {
            opacity: 0;
            visibility: hidden;
          }
          .icon-hover {
            opacity: 1;
            visibility: visible;
          }
        }
      }
    }
  }
}