svg, .icon__svg{
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
}

.icon{
    width: $iconSize;
    min-width: $iconSize;
    padding-bottom: $iconSize;
    position: relative;
    display: inline-block;
    vertical-align: top;

    svg{
        fill: $icon;
    }

    &.active{
        svg{
            fill: $icon--active;
        }

        &.icon--round{
            background: $icon--active;
        }
    }
}

.icon--reverse{
    svg{
        fill: $icon--reverse;
    }
}

.icon--animation{
    svg{
        transition: fill $animDuration;
    }
}

.icon--large{
    width: $iconSize * 1.5;
    min-width: $iconSize * 1.5;
    padding-bottom: $iconSize * 1.5;
}

.icon--small{
    width: $iconSize * 0.5;
    min-width: $iconSize * 0.5;
    padding-bottom: $iconSize * 0.5;
}

.icon--smallPad{
    svg{
        padding: $iconSize * 0.25;
    }
}

.icon--round{
    background: $icon;
    border-radius: $borderRadius;

    svg{
        fill: $icon--reverse;
    }
}

.icon--text{
    width: 1em;
    min-width: 1em;
    padding-bottom: 1em;
}