:host {
    --ez-badge--size-2xs: var(--space--2xs, 8px);
    --ez-badge--size-xs: var(--space--xs, 12px);
    --ez-badge--size-sm: var(--space--sm, 16px);
    --ez-badge--size-md: var(--space--md, 20px);
    --ez-badge--size-lg: var(--space--lg, 24px);
    --ez-badge--size-xl: var(--space--xl, 32px);

    --ez-badge--padding-2xs: 0;
    --ez-badge--padding-xs: var(--space--nano, 2px);
    --ez-badge--padding-sm: calc(var(--space--nano, 2px) + 1px);
    --ez-badge--padding-md: var(--space--3xs, 4px);
    --ez-badge--padding-lg: calc(var(--space--3xs, 4px) + 2px);
    --ez-badge--padding-xl: var(--space--2xs);

    --ez-badge--border-radius: calc(var(--border--radius-medium, 12px) + 8px);
    --ez-badge--font-family: var(--font-pattern, Roboto);
    --ez-badge--font-weight-medium: var(--text-weight--medium, 400);
    --ez-badge--background-color: var(--color--primary, #008561);
    --ez-badge--border-none: 0;
    --ez-badge--color: var(--text--inverted, #ffffff);
    --ez-badge--gap: calc(var(--ez-badge--padding-xs) + 1px);

    --ez-badge--font-size-md: var(--text--medium); 
    --ez-badge--font-size-sm: var(--text--medium);
    --ez-badge--font-size-xs: var(--text--small);
}
ez-icon {
    --ez-icon--color: inherit;
}
.badge {
    /*private*/
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.badge__content {
    /*public*/
    font-family: var(--ez-badge--font-family, Roboto);
    font-weight: var(--ez-badge--font-weight-medium, 400);
    background-color: var(--ez-badge--background-color, #008561);
    border: var(--ez-badge--border-none, 0);
    color: var(--ez-badge--color, #ffffff);
    border-radius: var(--ez-badge--border-radius, 20px);
    gap: var(--ez-badge--gap, 3px);

    /*private*/
    display: flex;
    justify-content: center;
}

.badge__content--fill-xs {
    /*public*/
    height: var(--ez-badge--size-xs, 12px);
    min-width: var(--ez-badge--size-xs, 12px);
}
.badge__content--fill-2xs {
    /*public*/
    height: var(--ez-badge--size-2xs, 8px);
    min-width: var(--ez-badge--size-2xs, 8px);
}

.badge__content--text-md {
    /*public*/
    height: calc(var(--ez-badge--size-md, 20px) - 2px);
    min-width: var(--ez-badge--size-sm, 20px);
    padding-top: var(--ez-badge--padding-sm);
    padding-bottom: var(--ez-badge--padding-sm);
    padding-right: var(--ez-badge--padding-xl);
    padding-left: var(--ez-badge--padding-xl);
    font-size: var(--ez-badge--font-size-md);
}
.badge__content--text-sm {
    /*public*/
    height: calc(var(--ez-badge--size-sm, 16px) - 2px);
    min-width: var(--ez-badge--size-sm, 16px);
    padding-top: var(--ez-badge--padding-sm);
    padding-bottom: var(--ez-badge--padding-sm);
    padding-right: var(--ez-badge--padding-xl);
    padding-left: var(--ez-badge--padding-xl);
    font-size: var(--ez-badge--font-size-sm);
}
.badge__content--text-xs {
    /*public*/
    height: var(--ez-badge--size-sm, 16px);
    min-width: var(--ez-badge--size-sm, 16px);
    padding-top: var(--ez-badge--padding-2xs);
    padding-bottom: var(--ez-badge--padding-2xs);
    padding-right: var(--ez-badge--padding-lg);
    padding-left: var(--ez-badge--padding-lg);
    font-size: var(--ez-badge--font-size-xs);
}

.badge__content--icon-lg {
    /*public*/
    height: var(--ez-badge--size-lg, 24px);
    min-width: var(--ez-badge--size-lg, 24px);
    padding: var(--ez-badge--padding-md);
}
.badge__content--icon-md {
    /*public*/
    height: var(--ez-badge--size-sm, 16px);
    min-width: var(--ez-badge--size-sm, 16px);
    padding: var(--ez-badge--padding-md);
}
.badge__content--icon-sm {
    /*public*/
    height: var(--ez-badge--size-sm, 16px);
    min-width: var(--ez-badge--size-sm, 16px);
    padding: var(--ez-badge--padding-xs);
}
.badge__content--icon-xs {
    /*public*/
    height: var(--ez-badge--size-xs, 12px);
    min-width: var(--ez-badge--size-xs, 12px);
    padding: var(--ez-badge--padding-xs);
}

.badge__content--icon-align-center {
    align-items: center;
}

.badge__content--icon-align-start {
    align-items: flex-start;
}

.badge__content--icon-align-end {
    align-items: flex-end;
}

.badge__content--fill {
    /*public*/
    position: absolute;
    top: 0;
    inset-inline-end: 0;

    /*private*/
    z-index: var(--most-visible, 2);
}
.badge__content--fill-top-right {
    /*public*/
    transform: translate(50%, -50%);

    /*private*/
    position: absolute;
    top: 0;
    right: 0;
}
.badge__content--fill-top-left {
    /*public*/
    transform: translate(-50%, -50%);

    /*private*/
    position: absolute;
    top: 0;
    left: 0;
}
.badge__content--fill-bottom-left {
    /*public*/
    transform: translate(-50%, 50%);

    /*private*/
    position: absolute;
    bottom: 0;
    left: 0;
}
.badge__content--fill-bottom-right {
    /*public*/
    transform: translate(50%, 50%);

    /*private*/
    position: absolute;
    bottom: 0;
    right: 0;
}