/* screen edge spacing */
#component-toolbox {
    /* Full screen width at all time */
    max-width: initial;
    margin: 0;
    padding: 0;
}

.side-tool-action {
    position: relative;
    width: 5rem;
    height: 5rem;

    background-repeat: no-repeat;
    background-position: center center;
}
.side-tool-action:hover {
    z-index: 1 !important;
}

.side-tool-action[data-badge="GoToCartPage"] > div {
    /* specific position on top of the cart picto */
    position: absolute;
    top: 8px;
    right: 7px;

    /* circle badge */
    width: 15px;
    height: 15px;
    border-radius: 50%;

    /* centering the qty's number  */
    display: flex;
    justify-content: center;
    align-items: center;
}

.side-tool-action[data-badge="NavbarToggle"] {
    background-size: 30px 20px;
}
.side-tool-action[data-badge="GoToPageTop"] {
    background-size: 15px 20px;
}
.side-tool-action[data-badge="GoToCartPage"] {
    background-size: 25px 20px;
}


#component-header .side-tool-action[data-badge="NavbarToggle"] {
    width: 3rem;
    height: 2rem;
}
#component-header .side-tool-action[data-badge="GoToCartPage"] {
    width: 3rem;
    background-size: 25px 20px;
}
#component-header .side-tool-action[data-badge="GoToCartPage"] > div {
    right: -3px;
}


#component-toolbox {
    z-index: 10;

    position: fixed;
    bottom: -20rem; /* outside of the screen */
    right: 1rem;

    transition: all 1s;
}
@media (min-width: 992px) {
    #component-toolbox {
        right: 2rem;
    }
}

#component-toolbox .side-tool-action {
    overflow-y: hidden;
}
#component-toolbox .side-tool-action.hide-from-toolbox {
    height: 0 !important;
    border-width: 0 !important;
}



/*** To define in 250748, 250754 or 250756 component's /common-add.css ***/
/* NavbarToggle */
.side-tool-action[data-badge="NavbarToggle"],
.side-tool-action[data-badge="NavbarToggle"]:hover {
    background-image: url('/common/assets/icons/picto-menu-mobile.svg');
}

/* Open mobile menu NavbarToggle */
#component-header.active .side-tool-action[data-badge="NavbarToggle"],
#component-header.active .side-tool-action[data-badge="NavbarToggle"]:hover {
    background-image: url('/common/assets/icons/picto-close.svg');
}

/* GoToPageTop */
.side-tool-action[data-badge="GoToPageTop"],
.side-tool-action[data-badge="GoToPageTop"]:hover {
    background-image: url('/common/assets/icons/picto-arrow-up.svg');
}

/* GoToCartPage */
.side-tool-action[data-badge="GoToCartPage"],
.side-tool-action[data-badge="GoToCartPage"]:hover {
    background-image: url('/common/assets/icons/picto-cart-thin.svg');
}

/* Header GoToCartPage */
#component-header .side-tool-action[data-badge="GoToCartPage"] {
    background-image: url('/common/assets/icons/picto-cart-thin.svg');
}