@use '@/styles/base';

.icon {
    display: flex;
    align-items: center;
    justify-content: center;

    svg {
        color: inherit;
    }
}

.size-xs {
    svg {
        width: base.$font-size-xs;
        height: base.$font-size-xs;
    }
}

.size-sm {
    svg {
        width: base.$font-size-sm;
        height: base.$font-size-sm;
    }
}

.size-md {
    svg {
        width: base.$font-size-md;
        height: base.$font-size-md;
    }
}

.size-lg {
    svg {
        width: base.$font-size-lg;
        height: base.$font-size-lg;
    }
}

.size-xl {
    svg {
        width: base.$font-size-xl;
        height: base.$font-size-xl;
    }
}

.color-default {
    svg {
        color: base.$font-color;
    }
}

.color-success {
    svg {
        color: base.$success-color !important;
    }
}

.color-error {
    svg {
        color: base.$danger-color !important;
    }
}

.color-info {
    svg {
        color: base.$info-color !important;
    }
}

.color-primary {
    svg {
        color: base.$primary-color !important;
    }
}

.color-warn {
    svg {
        color: base.$warning-color !important;
    }
}

.color-secondary {
    svg {
        color: base.$font-secondary-color !important;
    }
}

.icon-fill {
    svg {
        fill: currentcolor;
    }
}
