.Badge {
    position: relative;

    display: inline-flex;

    vertical-align: middle;
}

.Badge-Dot {
    display: flex;
    justify-content: center;
    align-items: center;

    box-sizing: border-box;
    min-width: var(--badge-size-small);
    height: var(--badge-size-small);
    padding: 0 2px;

    font-family: var(--badge-font-family);
    font-size: var(--badge-font-size);
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;

    color: var(--badge-typo-color);
    border: var(--badge-border-width) solid var(--badge-border-color);
    border-radius: var(--badge-border-radius);
    background-color: var(--badge-fill-color);
}

.Badge-Dot_withContent {
    min-width: var(--badge-size-large);
    height: var(--badge-size-large);
}

.Badge-Dot_withChildren {
    position: absolute;
    top: 0;
    right: 0;

    transform: translate(50%, -50%);
    transform-origin: 100% 0%;
}