.xxsmall-kpclcffp {
    --ui-lib-size: 1
}

.xsmall-kpclcffp {
    --ui-lib-size: 2
}

.small-kpclcffp {
    --ui-lib-size: 3
}

.medium-kpclcffp {
    --ui-lib-size: 4
}

.large-kpclcffp {
    --ui-lib-size: 5
}

.xlarge-kpclcffp {
    --ui-lib-size: 6
}

.floatingButton-kpclcffp {
    --ui-lib-size-defaulted: var(--ui-lib-size, 4);
    --ui-lib-size-defaulted-xxsmall: calc(max(0, 1 - (var(--ui-lib-size-defaulted) - 1) * (var(--ui-lib-size-defaulted) - 1)));
    --ui-lib-size-defaulted-xsmall: calc(max(0, 1 - (var(--ui-lib-size-defaulted) - 2) * (var(--ui-lib-size-defaulted) - 2)));
    --ui-lib-size-defaulted-small: calc(max(0, 1 - (var(--ui-lib-size-defaulted) - 3) * (var(--ui-lib-size-defaulted) - 3)));
    --ui-lib-size-defaulted-medium: calc(max(0, 1 - (var(--ui-lib-size-defaulted) - 4) * (var(--ui-lib-size-defaulted) - 4)));
    --ui-lib-size-defaulted-large: calc(max(0, 1 - (var(--ui-lib-size-defaulted) - 5) * (var(--ui-lib-size-defaulted) - 5)));
    --ui-lib-size-defaulted-xlarge: calc(max(0, 1 - (var(--ui-lib-size-defaulted) - 6) * (var(--ui-lib-size-defaulted) - 6)));
    align-items: center;
    background-color: var(--floating-button-bg-color, var(--color-container-fill-quinary-inverse));
    display: flex;
    justify-content: center;
    --size: calc(var(--ui-lib-size-defaulted-xxsmall)*24px + var(--ui-lib-size-defaulted-xsmall)*28px + var(--ui-lib-size-defaulted-small)*34px + var(--ui-lib-size-defaulted-medium)*40px + var(--ui-lib-size-defaulted-large)*48px + var(--ui-lib-size-defaulted-xlarge)*56px);
    border: none;
    border-radius: var(--floating-button-border-radius);
    box-shadow: 0 2px 4px 0 var(--color-other-shadow-primary-neutral-extra-heavy);
    height: var(--size);
    outline: none;
    overflow: visible;
    position: relative;
    width: var(--size)
}

.floatingButton-kpclcffp:focus {
    outline: none
}

.floatingButton-kpclcffp:focus-visible {
    outline: none
}

.floatingButton-kpclcffp:after {
    border-style: solid;
    border-width: 2px;
    box-sizing: border-box;
    content: "";
    display: none;
    height: calc(100% + 8px);
    inset-inline-start: -4px;
    pointer-events: none;
    position: absolute;
    top: -4px;
    width: calc(100% + 8px);
    z-index: 1
}

.floatingButton-kpclcffp:focus:after {
    display: block
}

.floatingButton-kpclcffp:focus-visible:after {
    display: block
}

.floatingButton-kpclcffp:focus:not(:focus-visible):after {
    display: none
}

.floatingButton-kpclcffp:after {
    border-color: var(--color-focus-outline-color-blue);
    border-radius: calc(var(--floating-button-border-radius) + 4px)
}

@media (any-hover:hover) {
    .floatingButton-kpclcffp:hover .contentSlot-kpclcffp>span[role=img] {
        color: var(--color-content-primary-accent-normal)
    }
}

.floatingButton-kpclcffp:active .contentSlot-kpclcffp>span[role=img] {
    color: var(--color-content-primary-accent-semi-bold)
}

.round-kpclcffp {
    --floating-button-border-radius: calc(var(--ui-lib-size-defaulted-xxsmall)*14px + var(--ui-lib-size-defaulted-xsmall)*14px + var(--ui-lib-size-defaulted-small)*17px + var(--ui-lib-size-defaulted-medium)*20px + var(--ui-lib-size-defaulted-large)*24px + var(--ui-lib-size-defaulted-xlarge)*28px)
}

.square-kpclcffp {
    --floating-button-border-radius: calc(var(--ui-lib-size-defaulted-xxsmall)*4px + var(--ui-lib-size-defaulted-xsmall)*6px + var(--ui-lib-size-defaulted-small)*6px + var(--ui-lib-size-defaulted-medium)*8px + var(--ui-lib-size-defaulted-large)*8px + var(--ui-lib-size-defaulted-xlarge)*12px)
}

.contentSlot-kpclcffp {
    align-items: center;
    display: flex;
    justify-content: center
}

.contentSlot-kpclcffp>span[role=img] {
    color: var(--floating-button-color, var(--color-content-primary-neutral-bold));
    display: inline-flex;
    flex-shrink: 0
}