.ui-badge {
  font-size: 10px;
  font-weight: 600;
  line-height: 13px;
  text-transform: uppercase;
  color: var(--secondary-0);
  background: var(--badge-gray-300);
  border-radius: 2px;
  padding: 6px 16px;
  width: max-content;
  cursor: default;
}

.ui-badge.ui-badge--cursor-pointer{
    cursor: pointer;
}

.ui-badge.ui-badge--type-round.ui-badge--small {
    padding: 2px 4px;
    min-width: 17px;
    display: block;
    text-align: center;
}

.ui-badge.ui-badge--type-round {
  border-radius: 30px;
  padding: 5.5px 8px;
}

:is(button, a, div, span, p).ui-badge .ui-badge__icon {
  font-size: 20px;
}

:is(button, a, div, span, p).ui-badge.ui-badge--type-round:has(.ui-badge-icon) {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
}

:is(button, a).ui-badge.ui-badge--type-round.ui-badge--clickable:has(.ui-badge-icon) {
  padding: 1px 8px;
}

.ui-badge.ui-badge--color-default {
  background: var(--badge-default-300);
}

.ui-badge.ui-badge--color-gray {
  background: var(--badge-gray-300);
}

.ui-badge.ui-badge--color-orange {
  background: var(--badge-orange-300);
}

.ui-badge.ui-badge--color-red {
  background: var(--badge-red-300);
}

.ui-badge.ui-badge--color-blue {
  background: var(--badge-blue-300);
}

.ui-badge.ui-badge--color-green {
  background: var(--badge-green-300);
}

.ui-badge.ui-badge--color-yellow {
  background: var(--badge-yellow-300);
}

/* ----- */

:is(button, a, div, span, p).ui-badge.ui-badge--color-light-default {
  background: var(--badge-default-light-bg);
  color: var(--badge-default-light-primary);
}

:is(button, a, div, span, p).ui-badge.ui-badge--color-light-default .ui-badge-icon {
  color: var(--badge-default-light-icon);
}

:is(button, a, div, span, p).ui-badge.ui-badge--color-light-green {
  background: var(--badge-green-light-bg);
  color: var(--badge-green-light-primary);
}

:is(button, a, div, span, p).ui-badge.ui-badge--color-light-green .ui-badge-icon {
  color: var(--badge-green-light-icon);
}

:is(button, a, div, span, p).ui-badge.ui-badge--color-light-red {
  background: var(--badge-red-light-bg);
  color: var(--badge-red-light-primary);
}

:is(button, a, div, span, p).ui-badge.ui-badge--color-light-red .ui-badge-icon {
  color: var(--badge-red-light-icon);
}

:is(button, a, div, span, p).ui-badge.ui-badge--color-light-yellow {
  background: var(--badge-yellow-light-bg);
  color: var(--badge-yellow-light-primary);
}

:is(button, a, div, span, p).ui-badge.ui-badge--color-light-yellow .ui-badge-icon {
  color: var(--badge-yellow-light-icon);
}

:is(button, a, div, span, p).ui-badge.ui-badge--color-light-blue {
  background: var(--badge-blue-light-bg);
  color: var(--badge-blue-light-primary);
}

:is(button, a, div, span, p).ui-badge.ui-badge--color-light-blue .ui-badge-icon {
  color: var(--badge-blue-light-icon);
}

:is(button, a, div, span, p).ui-badge.ui-badge--color-light-gray {
  background: var(--badge-gray-light-bg);
  color: var(--badge-gray-light-primary);
}

:is(button, a, div, span, p).ui-badge.ui-badge--color-light-gray .ui-badge-icon {
  color: var(--badge-gray-light-icon);
}

:is(button, a, div, span, p).ui-badge.ui-badge--color-yellow-validation {
  background: var(--validation-warning-100);
  color: var(--validation-warning-500);
}

:is(button, a, div, span, p).ui-badge.ui-badge--color-yellow-validation .ui-badge__icon {
  color: var(--validation-warning-400);
}

.ui-badge--clickable {
    border: none;
    outline: none;
    box-shadow: none;
    cursor: pointer;
}

.ui-badge--clickable span {
    text-decoration: underline;
}

.ui-badge--clickable.ui-badge--color-light-default {
    border: 1px solid var(--badge-default-light-bg);
    background-color: var(--badge-default-light-bg);
}
.ui-badge--clickable.ui-badge--color-light-green {
    border: 1px solid var(--badge-green-light-bg);
    background-color: var(--badge-green-light-bg);
}
.ui-badge--clickable.ui-badge--color-light-red {
    border: 1px solid var(--badge-red-light-bg);
    background-color: var(--badge-red-light-bg);
}
.ui-badge--clickable.ui-badge--color-light-yellow {
    border: 1px solid var(--badge-yellow-light-bg);
    background-color: var(--badge-yellow-light-bg);
}
.ui-badge--clickable.ui-badge--color-light-blue {
    border: 1px solid var(--badge-blue-light-bg);
    background-color: var(--badge-blue-light-bg);
}
.ui-badge--clickable.ui-badge--color-light-gray {
    border: 1px solid var(--badge-gray-light-bg);
    background-color: var(--badge-gray-light-bg);
}
.ui-badge--clickable.ui-badge--color-light-default:hover {
    background-color: var(--badge-default-light-bg-active);
}
.ui-badge--clickable.ui-badge--color-light-green:hover {
    background-color: var(--badge-green-light-bg-active);
}
.ui-badge--clickable.ui-badge--color-light-red:hover {
    background-color: var(--badge-red-light-bg-active);
}
.ui-badge--clickable.ui-badge--color-light-yellow:hover {
    background-color: var(--badge-yellow-light-bg-active);
}
.ui-badge--clickable.ui-badge--color-light-blue:hover {
    background-color: var(--badge-blue-light-bg-active);
}
.ui-badge--clickable.ui-badge--color-light-gray:hover {
    background-color: var(--badge-gray-light-bg-active);
}
.ui-badge--clickable.ui-badge--color-light-default:is(:active,:focus) {
    border: 1px solid var(--badge-default-light-icon);
    background-color: var(--badge-default-light-bg-active);
}
.ui-badge--clickable.ui-badge--color-light-green:is(:active,:focus) {
    border: 1px solid var(--badge-green-light-icon);
    background-color: var(--badge-green-light-bg-active);
}
.ui-badge--clickable.ui-badge--color-light-red:is(:active,:focus) {
    border: 1px solid var(--badge-red-light-icon);
    background-color: var(--badge-red-light-bg-active);
}
.ui-badge--clickable.ui-badge--color-light-yellow:is(:active,:focus) {
    border: 1px solid var(--badge-yellow-light-icon);
    background-color: var(--badge-yellow-light-bg-active);
}
.ui-badge--clickable.ui-badge--color-light-blue:is(:active,:focus) {
    border: 1px solid var(--badge-blue-light-icon);
    background-color: var(--badge-blue-light-bg-active);
}
.ui-badge--clickable.ui-badge--color-light-gray:is(:active,:focus) {
    border: 1px solid var(--badge-gray-light-icon);
    background-color: var(--badge-gray-light-bg-active);
}
.ui-badge--clickable:disabled,
.ui-badge--clickable.disabled {
    opacity: .4;
    pointer-events: none;
}

:is(button, a, div, span, p).ui-badge.ui-badge--type-calendar {
    border-radius: 4px;
    padding: 10px 16px;
    border-left-width: 2px;
    border-left-style: solid;
    text-transform: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

:is(button, a, div, span, p).ui-badge.ui-badge--type-calendar.ui-badge--color-custom {
    background: var(--badge-default-light-bg);
    color: var(--secondary-800);
    border-left-color: var(--badge-default-light-icon);
}

:is(button, a, div, span, p).ui-badge.ui-badge--type-calendar.ui-badge--color-custom:is(:hover, :active) {
    background: var(--badge-default-light-bg-active);
}

:is(button, a, div, span, p).ui-badge.ui-badge--type-calendar.ui-badge--color-invoice {
    background: var(--badge-yellow-light-bg);
    color: var(--validation-warning-500);
    border-left-color: var(--badge-yellow-light-icon);
}

:is(button, a, div, span, p).ui-badge.ui-badge--type-calendar.ui-badge--color-invoice:is(:hover, :active) {
    background: var(--badge-yellow-light-bg-active);
}

:is(button, a, div, span, p).ui-badge.ui-badge--type-calendar.ui-badge--color-delivery {
    background: var(--badge-green-light-bg);
    color: var(--validation-success-500);
    border-left-color: var(--badge-green-light-icon);
}

:is(button, a, div, span, p).ui-badge.ui-badge--type-calendar.ui-badge--color-delivery:is(:hover, :active) {
    background: var(--badge-green-light-bg-active);
}

:is(button, a, div, span, p).ui-badge.ui-badge--type-calendar.ui-badge--color-window4u {
    background: #D9F3FD;
    color: var(--window4u-700);
    border-left-color: var(--window4u-300);
}

:is(button, a, div, span, p).ui-badge.ui-badge--type-calendar.ui-badge--color-window4u:is(:hover, :active) {
    background: #B1E7FB;
}