.qodef-icon-shortcode {
    $transition-duration: 0.15s;

    display: inline-block;

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

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

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

        .qodef-icon-element {
            color: $first-main-color;
            line-height: inherit;
        }
        span.qodef-icon-element {
            vertical-align: middle;
        }
    }

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

    .qodef-icon-element {
        color: $first-main-color;
        @include qodefTransition(color $transition-duration ease-out);
    }
}

.qodef-icon-animation-holder {
    @include qodefTransform(scale(0));
    @include qodefTransition(transform 0.8s cubic-bezier(0.23, 1, 0.32, 1));
    display: inline-block;

    &.qodef-icon-animation-show {
        @include qodefTransform(scale(1));
    }
}

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

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

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

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

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