.bulkbar {
    position: fixed;
    z-index: 11;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    bottom: var(--spacing);
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
    width: 450px;
    max-width: 95%;
    padding: 5px var(--smSpacing);
    min-height: var(--lgBtnHeight);
    background: var(--surfaceColor);
    border-radius: 50px;
    box-shadow: var(--boxShadow);
    border: 1px solid var(--surfaceAlt3Color);
    transition-property: opacity, transform, display;
    transition-behavior: allow-discrete;
    transition-duration: var(--animationSpeed);
        transform: translate(-50%, 10px);
    @starting-style {
        opacity: 0;
        transform: translate(-50%, 10px);
    }
    &[hidden],
    &.hidden {
        opacity: 0;
        transform: translate(-50%, 10px);
    }
    > .btn:first-child {
        margin-left: -5px;
    }
    > .btn:last-child {
        margin-right: -5px;
    }

    @media (max-width: 480px) {
        border-radius: var(--borderRadius);
        padding: min(10px, var(--smSpacing)) var(--smSpacing);
        > .txt,
        > .content {
            width: 100%;
        }
    }
}

.bulkbar-wrapper {
    position: sticky;
    z-index: 11;
    width: 100%;
    left: 0;
    bottom: var(--smSpacing);
    right: 0;
    pointer-events: none;

    .bulkbar {
        position: relative;
        bottom: 0;
        left: auto;
        right: auto;
        margin: var(--smSpacing) auto;
        transform: translateY(0);
        pointer-events: auto;
        @starting-style {
            transform: translateY(10px);
        }
        &[hidden],
        &.hidden {
            transform: translateY(10px);
        }
    }
}

