@keyframes quicktoolbar-slidein {
    from {
        bottom: -200px;
    }

    to {
        bottom: 10px;
    }
}

@keyframes quicktoolbar-hide {
    from {
        bottom: 10px;
        opacity: 1;
    }

    to {
        bottom: -200px;
        opacity: 0;
    }
}

@media (max-width: 768px) {
    .thespace-quicktoolbar {
        display: inherit !important;
        padding: 1rem;
        position: fixed;
        animation: forwards quicktoolbar-slidein 0.5s;
        z-index: 10;
        width: 100%;
    }

    .thespace-quicktoolbar .quicktoolbar {
        background-color: #f8f8f8;
        padding: 1rem 2rem;
        display: flex;
        justify-content: space-between;
        font-size: 22px;
        border-radius: 1rem;
        height: 4.4rem;
        align-items: center;
        filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07))
            drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
    }

    .thespace-quicktoolbar .quicktoolbar .toolbar-item {
        width: 100%;
        height: 100%;
    }

    .thespace-quicktoolbar .quicktoolbar .toolbar-item a {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .thespace-quicktoolbar .quicktoolbar .toolbar-item a .quicktoolbar-icon {
        max-width: 2rem;
    }

    .quicktoolbar-fadeout {
        animation: forwards quicktoolbar-hide 0.5s;
    }
}

.thespace-quicktoolbar {
    display: none;
}