@kano/kbc-icons/lib/styles/main.scss

// Icons
// --------------------------------------------------

@import '~@kano/kbc-base-styles/src/tools.scss';

.icon {
    width: 22px;
    height: 22px;
    display: inline-block;
    vertical-align: middle;
}

.icon--smaller {
    width: 12px;
    height: 12px;
}

.icon--small {
    width: 16px;
    height: 16px;
}

.icon--base {
    width: 22px;
    height: 22px;
}

.icon--mid {
    width: 30px;
    height: 30px;
}

.icon--large {
    width: 36px;
    height: 36px;
}

.icon--larger {
    width: 64px;
    height: 64px;
}

.icon--largest {
    width: 112px;
    height: 112px;
}

.has-icon {
    position: relative;

    &:before {
        content: '';
        display: inline-block;
        margin-right: $spacing-smallest / 2;
    }

    &.kbc-button,
    &.nav__link {

        &:before {
            width: 22px;
        }

        .icon {
            width: auto;
            height: auto;
            display: flex;
            align-items: center;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            padding-left: inherit;
        }
    }
}

@each $color, $value in $all-colors-map {
    .icon--color-#{$color} {
        color: $value;
        fill: $value;
    }
}