.maggiolidxp-badge-link {
    /* Set the default color of the component */
    --background: rgb(var(--tone-neutral-08));
    --background-hover: rgb(var(--tone-neutral-06));
    --color: rgb(0, 0, 0);
    --icon-color: var(--color);
    /* Set the primary color of the component */
    --background-primary: rgb(var(--status-success-09));
    --background-primary-hover: rgb(var(--status-success-08));
    --color-primary: rgb(var(--status-success-03));
    --icon-color-primary: var(--color-primary);
    /* Set the secondary color of the component */
    --background-secondary: rgb(var(--label-orange-05));
    --background-secondary-hover: rgb(var(--label-orange-04));
    --color-secondary: rgb(var(--label-orange-10));
    --icon-color-secondary: var(--color-secondary);
    /* Set width and height of the icon */
    --icon-width: var(--button-icon-width, 24px);
    --icon-height: var(--button-icon-height, 24px);
    line-height: 1;
    margin-right: 0.25rem;
    display: inline-block;
    height: auto;
}

.maggiolidxp-badge-link .badge {
    display: inline-flex;
    min-width: -webkit-min-content;
    min-width: -moz-min-content;
    min-width: min-content;
    align-items: center;
    border-radius: 0.25rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0;
    padding-bottom: 0;
    height: 24px;
    vertical-align: top;
    line-height: 24px;
    -webkit-text-decoration-line: none;
    text-decoration-line: none;
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    color: var(--color);
    background-color: var(--background);
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
}

.maggiolidxp-badge-link .badge--neutral {
    /*height: 30px;*/
    padding-left: 0.2rem;
}
.maggiolidxp-badge-link .badge--neutral .icon {
    height: 18px;
    width: 18px;
    margin-right: 4px;
    font-size: 19px;
}

.maggiolidxp-badge-link .badge.badge--linked:hover {
    background-color: var(--background-hover);
}

.maggiolidxp-badge-link .badge--primary {
    color: var(--color-primary);
    background-color: var(--background-primary);
}
.maggiolidxp-badge-link .badge--primary.badge--outline {
    border-color: var(--color-primary);
}
.maggiolidxp-badge-link .badge--primary.badge--outline .icon {
    fill: var(--color-primary);
}
.maggiolidxp-badge-link .badge--primary.badge--linked:hover {
    background-color: var(--background-primary-hover);
}
.maggiolidxp-badge-link .badge--secondary {
    color: var(--color-secondary);
    background-color: var(--background-secondary);
}
.maggiolidxp-badge-link .badge--secondary.badge--outline {
    color: var(--background-secondary);
    border-color: var(--background-secondary);
}
.maggiolidxp-badge-link .badge--secondary.badge--outline .icon {
    fill: var(--background-secondary);
}
.maggiolidxp-badge-link .badge--secondary.badge--linked:hover {
    background-color: var(--background-secondary-hover);
}
.maggiolidxp-badge-link .badge--neutral.badge--outline {
    border-color: var(--color);
}
.maggiolidxp-badge-link .badge--neutral.badge--outline .icon {
    fill: var(--color);
}
.maggiolidxp-badge-link .badge--primary.badge--outline,
.maggiolidxp-badge-link .badge--secondary.badge--outline,
.maggiolidxp-badge-link .badge--neutral.badge--outline {
    background-color: transparent;
}
.maggiolidxp-badge-link .badge--primary.badge--icon.badge--outline,
.maggiolidxp-badge-link .badge--secondary.badge--icon.badge--outline {
  padding: 0.2rem 0.5rem;
}
.maggiolidxp-badge-link .badge--neutral.badge--icon.badge--outline {
  padding: 0.2rem 0.5rem 0.2rem 0.2rem;
}
.maggiolidxp-badge-link .icon {
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    width: var(--icon-width);
    height: var(--icon-height);
    fill: var(--icon-color);
}
.maggiolidxp-badge-link .icon:not(.icon--neutral) {
    text-indent: -5px;
    position: relative;
    top: -5px;
}
.maggiolidxp-badge-link .icon + .maggiolidxp-badge-link .text {
    padding-left: 0.25rem;
}

.maggiolidxp-badge-link .icon--primary {
    fill: var(--icon-color-primary);
}

.maggiolidxp-badge-link .icon--secondary {
    fill: var(--icon-color-secondary);
}

.maggiolidxp-badge-link mds-text {
    display: inline-flex;
    align-items: center;
}

.maggiolidxp-badge-link .text {
    line-height: var(--icon-height);
}