:root {
    --mb-color-new: #ef4444;
    --mb-color-new-shadow: rgba(239, 68, 68, .4);
    --mb-color-new-shadow-transparent: rgba(239, 68, 68, 0);

    --mb-color-preparation: #2563eb;
    --mb-color-preparation-shadow: rgba(37, 99, 235, .4);
    --mb-color-preparation-shadow-transparent: rgba(37, 99, 235, 0);

    --mb-text-color: #fff;

    --mb-font-family: Arial, Helvetica, sans-serif;
    --mb-font-size: 10px;
    --mb-font-weight: 700;

    --mb-radius: 999px;

    --mb-dot-size: 12px;
    --mb-expanded-height: 24px;
    --mb-expanded-padding: 5px 8px;
    --mb-expanded-width-new: 72px;
    --mb-expanded-width-preparation: 145px;

    --mb-size-transition-duration: .25s;
    --mb-color-transition-duration: .15s;
    --mb-pulse-duration: 1.5s;

    --mb-z-index: 1000;
}

.new-badge-param,
.new-badge-response,
.preparation-badge-param,
.preparation-badge-response {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-left: 6px;
    padding: var(--mb-expanded-padding);

    border-radius: var(--mb-radius);

    font-family: var(--mb-font-family) !important;
    font-size: var(--mb-font-size) !important;
    font-weight: var(--mb-font-weight) !important;
    line-height: 1;

    text-transform: uppercase;
    white-space: nowrap;
}

.new-badge-param,
.new-badge-response {
    background: var(--mb-color-new) !important;
    color: var(--mb-text-color) !important;
}

.preparation-badge-param,
.preparation-badge-response {
    background: var(--mb-color-preparation) !important;
    color: var(--mb-text-color) !important;
}

.new-badge-endpoint,
.preparation-badge-endpoint,
.new-badge-section,
.preparation-badge-section,
.new-badge-group,
.preparation-badge-group {
    position: absolute;

    right: 12px;
    top: 50%;

    transform: translateY(-50%);

    display: flex;
    align-items: center;
    justify-content: center;

    width: var(--mb-dot-size);
    height: var(--mb-dot-size);
    min-width: var(--mb-dot-size);

    padding: 0;

    overflow: hidden;

    border-radius: var(--mb-radius);

    font-family: var(--mb-font-family) !important;
    font-size: var(--mb-font-size) !important;
    font-weight: var(--mb-font-weight) !important;
    line-height: 1;

    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;

    color: transparent !important;

    pointer-events: none;
    z-index: var(--mb-z-index);

    transition:
        width var(--mb-size-transition-duration) ease,
        min-width var(--mb-size-transition-duration) ease,
        height var(--mb-size-transition-duration) ease,
        padding var(--mb-size-transition-duration) ease,
        color var(--mb-color-transition-duration) ease;
}

.new-badge-section,
.preparation-badge-section {
    left: 2px;
    right: auto;
    transform-origin: left center;
}

.new-badge-endpoint,
.new-badge-section,
.new-badge-group,
label[type="group"] > .new-badge-group {
    background: var(--mb-color-new) !important;
    background-color: var(--mb-color-new) !important;
    background-image: none !important;
}

.preparation-badge-endpoint,
.preparation-badge-section,
.preparation-badge-group,
label[type="group"] > .preparation-badge-group {
    background: var(--mb-color-preparation) !important;
    background-color: var(--mb-color-preparation) !important;
    background-image: none !important;
}

label:hover .new-badge-endpoint,
*:hover > .new-badge-section,
label[type="group"]:hover > .new-badge-group {
    width: var(--mb-expanded-width-new);
    min-width: var(--mb-expanded-width-new);
    height: var(--mb-expanded-height);
    padding: var(--mb-expanded-padding);
    color: var(--mb-text-color) !important;
}

label:hover .preparation-badge-endpoint,
*:hover > .preparation-badge-section,
label[type="group"]:hover > .preparation-badge-group {
    width: var(--mb-expanded-width-preparation);
    min-width: var(--mb-expanded-width-preparation);
    height: var(--mb-expanded-height);
    padding: var(--mb-expanded-padding);
    color: var(--mb-text-color) !important;
}

.new-badge-endpoint,
.new-badge-section,
.new-badge-group {
    animation: pulse-red var(--mb-pulse-duration) infinite;
}

.preparation-badge-endpoint,
.preparation-badge-section,
.preparation-badge-group {
    animation: pulse-blue var(--mb-pulse-duration) infinite;
}

@keyframes pulse-red {
    0% {
        box-shadow: 0 0 0 0 var(--mb-color-new-shadow);
    }
    70% {
        box-shadow: 0 0 0 6px var(--mb-color-new-shadow-transparent);
    }
    100% {
        box-shadow: 0 0 0 0 var(--mb-color-new-shadow-transparent);
    }
}

@keyframes pulse-blue {
    0% {
        box-shadow: 0 0 0 0 var(--mb-color-preparation-shadow);
    }
    70% {
        box-shadow: 0 0 0 6px var(--mb-color-preparation-shadow-transparent);
    }
    100% {
        box-shadow: 0 0 0 0 var(--mb-color-preparation-shadow-transparent);
    }
}