.fi-create-transaction-fab {
    position: fixed;
    inset-inline-start: 50%;
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    transform: translateX(-50%);
    border-radius: 9999px;
    background-color: var(--primary-600);
    color: var(--gray-950, #0a0a0a);
    box-shadow:
        0 10px 15px -3px rgb(0 0 0 / 0.2),
        0 4px 6px -4px rgb(0 0 0 / 0.2);
    transition:
        background-color 150ms ease,
        transform 150ms ease,
        box-shadow 150ms ease;
}

@media (max-width: 1023px) {
    body:has(.fi-create-transaction-fab) .fi-main {
        padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));
    }
}

@media (min-width: 1024px) {
    .fi-create-transaction-fab {
        display: none;
    }
}

.dark .fi-create-transaction-fab {
    background-color: var(--primary-500);
}

.fi-create-transaction-fab:hover {
    background-color: var(--primary-500);
}

.dark .fi-create-transaction-fab:hover {
    background-color: var(--primary-400);
}

.fi-create-transaction-fab:focus-visible {
    outline: 2px solid var(--primary-400);
    outline-offset: 3px;
}

.fi-create-transaction-fab:active {
    transform: translateX(-50%) scale(0.96);
}

.fi-create-transaction-fab-icon {
    width: 1.75rem;
    height: 1.75rem;
}