/*
    Needs Color1.css

    Example of use:

    1) Con pulsante tondo:
        <div class="ButtonTips1_Main Color1_ColorBrown ButtonTips1_Brown">                                              
            <span class="Text1_Titolo2 ButtonTips1_Slave">Prodotto</span>
            <span class="Text1_Titolo1">☰</span>
        </div>                                           

    2) Liscio senza pulsante con la sola scritta

    3) Se voglio il tips a sinistra aggiungo ButtonTips1_Right
        <div class="ButtonTips1_Main Color1_ColorOrange Color1_BackgroundColorWhite">                                              
            <span class="Text1_Titolo2 ButtonTips1_Slave Color1_BackgroundColorOrange Color1_ColorWhite ButtonTips1_Right">Prodotto</span>
            <span class="Text1_Titolo1">☰</span>
        </div>  

*/



.ButtonTips1_Main {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    margin-right: auto;
    margin-left: auto;
}
    .ButtonTips1_Main:disabled .ButtonTips1_Slave {
        background-color: var(--disabled_BackgroundColor) !important;
    }

    .ButtonTips1_Main:disabled {
        background-color: var(--disabled_BackgroundColor) !important;
        color: var(--disabled_Color) !important;
        cursor: not-allowed !important;
        pointer-events: all !important;
    }
    .ButtonTips1_Main:hover:disabled {
        background-color: var(--disabled_BackgroundColor) !important;
        color: var(--disabled_Color) !important;
    }





    .ButtonTips1_Main:hover {
        background-color: currentColor;
    }
        .ButtonTips1_Main:hover .ButtonTips1_Slave {
            //left: auto;
        }

/* Desktop */
@media screen and (min-width: 801px) {
    .ButtonTips1_Circle {
        border-radius: 50%;
        padding: 15px;
        margin: 10px;
        width: 35px;
        height: 35px;
        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    }

    .ButtonTips1_Square {
        border-radius: 10%;
        padding: 15px;
        margin: 10px;
        width: 40px;
        height: 40px;
        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    }
}
/* Mobile Horizontal*/
@media screen and (min-width: 601px) and (max-width: 800px) {
    .ButtonTips1_Circle {
        border-radius: 50%;
        padding: 8px;
        margin: 5px;
        width: 40px;
        height: 40px;
        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    }

    .ButtonTips1_Square {
        border-radius: 10%;
        padding: 8px;
        margin: 5px;
        width: 36px;
        height: 36px;
        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    }
}
/* Mobile*/
@media screen and (max-width: 600px) and (min-height: 61px) {
    .ButtonTips1_Circle {
        border-radius: 50%;
        padding: 8px;
        margin: 8px;
        width: 40px;
        height: 40px;
        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    }

    .ButtonTips1_Square {
        border-radius: 10%;
        padding: 8px;
        margin: 8px;
        width: 36px;
        height: 36px;
        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    }
}
/* Mobile | caso per menu compattissimo*/
@media screen and (max-width: 600px) and (max-height: 60px) {
    .ButtonTips1_Circle {
        border-radius: 50%;
        padding: 8px;
        margin: 2px;
        width: 40px;
        height: 40px;
        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    }
    .ButtonTips1_Square {
        border-radius: 10%;
        padding: 8px;
        margin: 10px;
        width: 36px;
        height: 36px;
        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    }
}



.ButtonTips1_Slave {
    position: absolute;
    top: 0;
    padding: 5px 8px;
    border-radius: 5px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    width: -webkit-fill-available;
    min-width: fit-content;
    max-width: fit-content;
    white-space: nowrap;
}

    .ButtonTips1_Slave::before {
        position: absolute;
        content: "";
        height: 8px;
        width: 8px;
        background: inherit;
        bottom: -3px;
        left: 50%;
        transform: translate(-50%) rotate(45deg);
        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

.ButtonTips1_Main:hover:disabled .ButtonTips1_Slave::before {
    background: var(--disabled_BackgroundColor) !important;
    color: var(--disabled_Color) !important;
    cursor: not-allowed !important;
    pointer-events: all !important;
}









.ButtonTips1_Main:hover span,
.ButtonTips1_Main:focus-visible span,
.ButtonTips1_Main:active span {
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
    color: white;
}
.ButtonTips1_Main:hover:disabled span {
    color: var(--disabled_Color) !important;
    cursor: not-allowed !important;
    pointer-events: all !important;
}






.ButtonTips1_Main:hover .ButtonTips1_Slave,
.ButtonTips1_Main:focus-visible .ButtonTips1_Slave,
.ButtonTips1_Main:active .ButtonTips1_Slave {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /* width: 100% !important; */
    padding: 5px;
    z-index: 10;
    white-space: nowrap;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
    color: white;
    max-width: fit-content;
    transform: translateY(calc(-100% - 6px));
}





.ButtonTips1_Right {
    left: 0;
    top: auto;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.ButtonTips1_Main:hover .ButtonTips1_Right {
    left: calc(100% + 8px);
    top: auto !important;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform: translate(0%);
    margin-left: auto;
    /* right: -100%; */
}
.ButtonTips1_Right:disabled {
    visibility: hidden;
    transition: none;
}
.ButtonTips1_Right::before {
    left: 0;
    top: calc(50% - 4px);
}






.ButtonTips1_Left {
    left: auto !important;
    top: auto;
    right: calc(100% + 5px);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform: translate(50%);
}
.ButtonTips1_Main:hover .ButtonTips1_Left {
    /* left: auto !important;*/
    top: auto !important;
    /*right: calc(100% + 8px);*/
    transform: translate(0%);
    margin-right: auto;
}

.ButtonTips1_Left::before {
    left: 100%;
    top: calc(50% - 4px);
}
.ButtonTips1_Left {
    left: auto !important;
    top: auto;
    right: calc(100% + 5px);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform: translate(50%);
}


.ButtonTips1_Main:hover .ButtonTips1_Down {
    left: auto !important;
    top: calc(100% + 8px) !important;
    /* transform: translate(0%);    */
    margin-top: auto;
    transform:inherit;
}
.ButtonTips1_Down::before {
    top: calc(0% - 4px);
}
.ButtonTips1_Down:disabled {
    visibility: hidden;
    transition: none;
}