.edgtf-icon-shortcode {
    $transition-duration: 0.15s;
    color: #929292;
    overflow:hidden;
    display: inline-block;
    vertical-align: middle;

    &.circle,
    &.square {
        background-color: #f6f6f6;
        width: 2em;
        height: 2em;
        line-height: 2em;
        text-align: center;

        @include edgtfTransition(
                background-color $transition-duration ease-in-out,
                border-color $transition-duration ease-in-out
        );

        a {
            display: inline-block;
            width: 100%;
            height: 100%;
            overflow:hidden;
        }

        .edgtf-icon-element {
            color: $first-main-color;
            line-height: inherit;
        }
    }

    &.circle {
        @include edgtfBorderRadius(50%);
    }
}

.edgtf-iwt-flip-enabled-yes {

    .edgtf-icon-shortcode {

        a {
            position:relative;
            display:block;

            .edgtf-icon-element-clone {
                position:absolute;
                top: 100%;
                width: 100%;
                left: 0;
                height: 100%;
            }
        }

        .edgtf-icon-element {
            color: $first-main-color;
            display: block;
            @include edgtfTransition(all 0.4s $transition-easing);
        }

        &:hover {

            .edgtf-icon-element {
                @include edgtfTransform(translateY(-100%));
            }

            &.edgtf-icon-element-clone {
                @include edgtfTransform(translateY(100%));

                &:hover {
                    @include edgtfTransform(translateY(0));
                }
            }
        }

        &.circle {
            @include edgtfBorderRadius(50%);

            // icon animation effect never goes out of the circle
        }

    }
}

.edgtf-icon-animation-holder {
    @include edgtfTransform(scale(0));
    @include edgtfTransition(all 0.15s ease-in-out);
    display: inline-block;

    &.edgtf-icon-animation-show {
        @include edgtfTransform(scale(1));
    }
}

.edgtf-icon-tiny {
    font-size: 1.33333333em;
    line-height: .75em;
    vertical-align: -15%;
}

.edgtf-icon-small {
    font-size: 2em;
}

.edgtf-icon-medium {
    font-size: 3em;
}

.edgtf-icon-large {
    font-size: 4em;;
}

.edgtf-icon-huge {
    font-size: 5em;
}