/* NAVIGATION BUTTONS */
.NavigationLink_Button{
    display: flex;
    position: relative;
    padding: 0 8px;
    margin: auto;
    gap: 8px;
}
.NavigationLink_Button img{
    height: 22px;
    width: fit-content;
    opacity: .35;
}
.NavigationLink_Button h5{
    text-wrap: nowrap;
    margin: auto 0;
}
.NavigationLink_Button::after{
    content: '';
    display: block;
    position: absolute;
    border-top: 3px solid var(--highlight-color);
    bottom: -10px;
    left: 0;
    width: 100%;
    transform: scaleX(0);
    --webkit-transform: scaleX(0);
    transition: var(--cubic-transition);
}
/* BUTTONS TRANSITION */
.NavigationLink_Button:hover::after, .NavigationLink_Button:is(.ActiveButton)::after { transform: scaleX(1); --webkit-transform: scaleX(1); }
.ActiveButton img { opacity: 1 !important; }
.ActiveButton h5 { color: var(--text-color) !important; }
.ActiveButton { pointer-events: none; }


/* BASE BUTTONS (WITH BACKGROUND) */
.BaseButtonList_Container{
    display: flex;
    margin-top: 4px;
    margin-left: auto;
    gap: 8px;
}
.BaseButton_Container{
    display: flex;
    position: relative;
    background-color: var(--button-background-color);
    border: 2px solid var(--button-background-color);
    height: 44px;
    width: 44px;
    border-radius: 40px;
    gap: 16px;
}
.BaseButton_Container:has(.ButtonText){
    width: fit-content;
    flex-wrap: nowrap;
    padding: 0 24px;
}
.BaseButton_Container img{
    position: relative;
    margin: auto;
    width: fit-content;
    height: 22px;
}
.ButtonText{ margin: auto; }
/* BUTTONS TRANSITION */
.BaseButton_Container:hover{
    background-color: var(--highlight-color);
}
@media screen and (max-width: 768px) {
    .BaseButton_Container{ padding: 0 !important; }
    .BaseButton_Container:has(.ButtonText){ padding: 2px 16px !important; }
    .BaseButton_Container img{
        height: 18px;
    }
}