.circle-button {
    position: relative;
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 3em;
    height: 3em;
    border-radius: 50%;
    border: var(--size-xxs) solid var(--circle-button__border-color);
    background: var(--circle-button__background);
    color: var(--circle-button__color);
    font-size: 1.5em;
    cursor: pointer;
    visibility: visible;
    transition: background-color var(--base-transition),
    box-shadow var(--base-transition),
    transform var(--base-transition),
    color var(--base-transition),
    visibility var(--base-transition),
    border var(--base-transition);
}

.circle-button--s {
    width: 2em;
    height: 2em;
    font-size: 1.5em;
}

.circle-button--positive {
    --circle-button__background-hover: var(--color-positive);
    --circle-button__color: var(--color-main-inverted);
    --circle-button__color-hover: var(--color-main-inverted);
    --circle-button__background: color-mix(in srgb, var(--color-positive), transparent 20%);
}
.circle-button--negative {
    --circle-button__background-hover: var(--color-negative);
    --circle-button__color: var(--color-main-inverted);
    --circle-button__color-hover: var(--color-main-inverted);
    --circle-button__background: color-mix(in srgb, var(--color-negative), transparent 20%);
}

.circle-button:hover {
    --back-icon-arm-length: 1.25em;
    color: var(--circle-button__color-hover);
    transform: translateY(calc(-1*var(--size-rxxxs)));
    box-shadow: var(--elevation-1);
    background-color: var(--circle-button__background-hover);
}
.circle-button:disabled {
    color: var(--circle-button__color-disabled);
    background-color: var(--circle-button__background-disabled);
    cursor: default;
}

.circle-button--empty:hover .badge {
    bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    font-size: 1.5em;
    transform: translate(-50%, 0);
}

.circle-button--empty .circle-button__amount {
    padding: 0;
    width: 0;
}

.circle-button:not(.circle-button--empty) .circle-button__empty-icon {
    width: 0;
}

.circle-button--hidden {
    visibility: hidden;
    width: 0;
    height: 0;
    border: 0;
}

.circle-button__icon {
    opacity: 1;
    transition: opacity var(--base-transition);
}

.circle-button--hidden .circle-button__icon {
    opacity: 0;
}

.circle-button--hidden .badge {
    width: 0;
    height: 0;
    padding: 0;
}

.circle-button__amount {
    width: calc-size(auto, size);
    overflow: hidden;
    min-width: 0;
    padding: 0 0.5em;
    transition: padding var(--base-transition), width var(--base-transition);
}

.circle-button__empty-icon {
    overflow: hidden;
    font-size: 0.8em;
    transition: width var(--base-transition);
}



.badge {
    display: inline-flex;
    box-sizing: border-box;
    font-size: 0.625em;
    font-weight: var(--font-weight-normal);
    background-color: var(--badge-background);
    color: var(--badge-color);
    border-radius: 1em;
    padding: 0.25em 0;
    position: absolute;
    min-width: var(--badge-size);
    justify-content: center;
    align-items: center;
    overflow: hidden;
    height: var(--badge-size);
    bottom: 0;
    left: 50%;
    width: calc-size(auto, size);
    transform: translate(-50%, 50%);
    transition: bottom var(--base-transition),
    padding var(--base-transition),
    width var(--base-transition),
    height var(--base-transition),
    font-size var(--base-transition),
    border-radius var(--base-transition),
    transform var(--base-transition);
}