.icon {

width: $icon-size;
height: $icon-size;

i, svg {
        font-size: $icon-size - .75;
}

}

.icon + .icon-text {

padding-left: 1rem;
width: calc(100% - #{$icon-size} - 1);

}

.icon-xl {

width: $icon-size-xl;
height: $icon-size-xl;

i, svg {
        font-size: $icon-size-xl - .75;
}

}

.icon-xl + .icon-text {

width: calc(100% - $icon-size-xl - 1);

}

.icon-lg {

width: $icon-size-lg;
height: $icon-size-lg;

i, svg {
        font-size: $icon-size-lg - .75;
}

}

.icon-lg + .icon-text {

width: calc(100% - $icon-size-lg - 1);

}

.icon-sm {

width: $icon-size-sm;
height: $icon-size-sm;

i, svg {
        font-size: $icon-size-sm - .75;
}

}

.icon-sm + .icon-text {

width: calc(100% - $icon-size-sm - 1);

}

// Icons included in shapes .icon-shape {

padding: 12px;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;

i, svg {
        font-size: 1.25rem;
}

&.icon-lg {
        i, svg {
                font-size: 1.625rem;
        }
}

&.icon-sm {
        i, svg {
                font-size: .875rem;
        }
}

svg {
        width: 30px;
        height: 30px;
}

}

@each $color, $value in $theme-colors {

.icon-shape-#{$color} {
        @include icon-shape-variant(theme-color($color));
}

}