:import {
    -st-from: "../../common/formatters.st";
    -st-named: color, applyOpacity, fallback;
}

:import {
    -st-from: './Badge.base.st.css';
    -st-named: icon;
    -st-default: BadgeBase;
}

/*Overrides*/
:vars {
    /*
        Background color
        @default color-5 with opacity 0.1
    */
    BadgeBgColor: --overridable;
    /*
        Text color
        @default priority default and light: color-5, priority primary: color-1
    */
    BadgeTextColor: --overridable;
}

/*
 * Background color
 * @type color
 * @default --wix-color-5 with opacity 0.1
 */
@property st-global(--wix-ui-tpa-badge-badge-bg-color);

/*
 * Text color
 * @type color
 * @default priority default and light: --wix-color-5, priority primary: --wix-color-1
 */
@property st-global(--wix-ui-tpa-badge-badge-text-color);

:vars {
    defaultBgColor: color(fallback(value(BadgeBgColor), applyOpacity(color(color-5), 0.1)));
    defaultTextColor: color(fallback(value(BadgeTextColor), color(color-5)));
}

:vars {
    lightBgColor: color(fallback(value(BadgeBgColor), color(color-1)));
    lightTextColor: color(fallback(value(BadgeTextColor), color(color-5)));
    lightBorderColor: applyOpacity(value(lightTextColor), 0.10);
}

:vars {
    primaryBgColor: color(fallback(value(BadgeBgColor), color(color-8)));
    primaryTextColor: color(fallback(value(BadgeTextColor), color(color-1)));
}

:vars {
    secondaryBgColor: color(fallback(value(BadgeBgColor), applyOpacity(color(color-8), 0.1)));
    secondaryTextColor: color(fallback(value(BadgeTextColor), color(color-8)));
}

.root {
    border-radius: 12px;
    line-height: 20px;
    font-size: 12px;
}

.root {
    -st-extends: BadgeBase;
}

.root::before, .root::after {
    content: '';
    width: 12px;
}

.root:withIcon::before {
    width: 10px;
}

.root .icon {
    height: 16px;
    width: 18px;
}

.root .icon::after {
    content: '';
    width: 2px;
}

.root .icon > svg {
    width: 16px;
    height: 16px;
}

/* Deprecated - Old style params overriding for full mixin */

.root {
    background-color: color(value(defaultBgColor));
    color: color(value(defaultTextColor));
    border: none;
}

.root .icon svg:not([fill="currentColor"]) path {
    fill: color(value(defaultTextColor));
}

/* Variants - including style overrides capabilities */

.overrideStyleParams {
    background-color: color(value(defaultBgColor));
    color: color(value(defaultTextColor));
    border: none;
}

.overrideStyleParams .icon svg:not([fill="currentColor"]) path /* default */ {
    fill: color(value(defaultTextColor));
}

.priority-light {
    background-color: color(value(lightBgColor));
    color: color(value(lightTextColor));
    border-color: color(value(lightBorderColor));
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    line-height: 18px;
}

.priority-light .icon svg:not([fill="currentColor"]) path {
    fill: color(value(lightTextColor));
}

.priority-primary {
    background-color: color(value(primaryBgColor));
    color: color(value(primaryTextColor));
    border: none;
}

.priority-primary .icon svg:not([fill="currentColor"]) path {
    fill: color(value(primaryTextColor));
}

.priority-secondary {
    background-color: color(value(secondaryBgColor));
    color: color(value(secondaryTextColor));
    border: none;
}

.priority-secondary .icon svg:not([fill="currentColor"]) path {
    fill: color(value(secondaryTextColor));
}

/* -------------- new icons ---------------------- */

.root .icon svg[fill="currentColor"] {
    color: color(value(defaultTextColor));
}

.overrideStyleParams .icon svg[fill="currentColor"] /* default */ {
    color: color(value(defaultTextColor));
}

.priority-light .icon svg[fill="currentColor"] {
    color: color(value(lightTextColor));
}

.priority-primary .icon svg[fill="currentColor"] {
    color: color(value(primaryTextColor));
}

.priority-secondary .icon svg[fill="currentColor"] {
    color: color(value(secondaryTextColor));
}

/* st-namespace-reference="../../../../../src/components/Badge/Badge.deprecated.st.css" */