.phd__button{




    --phd__paddings: var(--phd__vertical-padding) var(--phd__horizontal-padding);

    --phd__button-main-color-rgb: var(--phd__color-primary-rgb);
    --phd__button-main-inverse-color-rgb: var(--phd__color-primary-inverse-rgb);

    --phd__button-main-color: rgb(var(--phd__button-main-color-rgb));
    --phd__button-main-inverse-color: rgb(var(--phd__button-main-inverse-color-rgb));
    --phd__button-main-color-soft: rgba(var(--phd__button-main-color-rgb), var(--phd__color-opacity));


    display: inline-flex;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    flex-direction: row;
    -moz-box-align: center;
    align-items: center;
    -moz-box-pack: center;
    justify-content: center;


    /*border-style: none;*/
    box-shadow: none;
    text-decoration: none;
    appearance: none;
    margin: 0;

    cursor: pointer;

    font-size: var(--phd__font-size);
    font-weight: 400;
    line-height: var(--phd__line-height);
    padding: var(--phd__paddings);

    border-radius: var(--phd__border-radius);
    color: var(--phd__button-main-inverse-color);
    background-color: var(--phd__button-main-color);
    border: var(--phd__border-width) solid transparent;
    gap: 8px;

    height: fit-content;
    transition: filter 0.3s ease, background-color 0.3s ease;
    width: fit-content;


}


.phd__button:hover{
    filter: var(--phd__hover-filter);
}

.phd__button:disabled{
    pointer-events: none;
    cursor: not-allowed;
    opacity: .3;
}

.phd__button:focus-visible{
    outline: var(--phd__focus-line-color) 2px solid;
    outline-offset: 2px;
}

.phd__button:active{
    /*outline: rgba(var(--phd__btn-main-color-base), 0.2) 3px solid;*/
    filter: brightness(0.85) contrast(0.9);
    /*filter: contrast(0.2);*/
}

.phd__button.btn-block{
    width: 100%;
}

.phd__button.btn-white{
    --phd__button-main-color: var(--phd__main-inverse-color) !important;
    color: rgb(var(--phd__button-main-color-rgb));
}







/* ✴️ ICON*/
.phd__button span{
    font-size: var(--phd__icon-size);
    display: flex;
    width: var(--phd__icon-size);
    height: var(--phd__font-size);
    position: relative;
    /*background-color: #00a1ff;*/
}

.phd__button span:before{
    position: absolute;
    top: 50%;
    left: 0;
    margin: 0;
    transform: translate(0%, -50%);
}

.phd__button.btn-only-icon{
    padding-left: 0;
    padding-right: 0;
    aspect-ratio: 1 / 1;
    height: calc( var(--phd__border-width) * 2 + var(--phd__vertical-padding) * 2 + var(--phd__line-height));
}



/* ✳️ TYPES */

.phd__button.phd-progress::after{
    border-top-color: var(--phd__button-main-inverse-color);
}


/*OUTLINE*/
.phd__button.btn-outline{
    border: var(--phd__border-width) solid var(--phd__button-main-color);
    color: var(--phd__button-main-color);
    background-color: transparent;
}
.phd__button.btn-outline.phd-progress::after{
    border-top-color: var(--phd__button-main-color);
}
.phd__button.btn-outline:hover{
    background-color: var(--phd__button-main-color-soft);
}

.phd__button.btn-outline.btn-white:hover{
    --phd__button-main-color-soft: rgba(var(--phd__button-main-inverse-color-rgb), var(--phd__color-opacity));
    background-color: var(--phd__button-main-color-soft);
}



.phd__button.btn-outline:focus-visible{
    outline: none;
    border-color: var(--phd__focus-line-color);
}


/*SOFT*/
.phd__button.btn-soft{
    color: var(--phd__button-main-color);
    background-color: var(--phd__button-main-color-soft);
}

.phd__button.btn-soft.phd-progress::after{
    border-top-color: var(--phd__button-main-color);
}

.phd__button.btn-soft:hover{
    --phd__color-opacity: .15;
}

.phd__button.btn-soft:focus-visible{
    outline: none;
    border-color: var(--phd__focus-line-color);
}


.phd__button.btn-soft.btn-white{
    --phd__button-main-color-soft: rgba(var(--phd__button-main-inverse-color-rgb), var(--phd__color-opacity));
    background-color: var(--phd__button-main-color-soft);
}



/*LINK*/
.phd__button.btn-link{
    color: var(--phd__button-main-color);
    background-color: transparent;
}
.phd__button.btn-link.phd-progress::after{
    border-top-color: var(--phd__button-main-color);
}


.phd__button.btn-link:hover{
    --phd__color-opacity: .05;
    background-color: var(--phd__button-main-color-soft);
}

.phd__button.btn-link:focus-visible{
    outline: none;
    border-color: var(--phd__focus-line-color);
}


.phd__button.btn-link.btn-white:hover{
    --phd__button-main-color-soft: rgba(var(--phd__button-main-inverse-color-rgb), var(--phd__color-opacity));
    background-color: var(--phd__button-main-color-soft);
}


/*.phd__button.btn-only-icon{*/
/*    aspect-ratio: 1 / 1;*/
/*}*/




/* 🆑 SIZES */

.phd__button.btn-compact{
    --phd__font-size: var(--phd__font-size-compact);
    --phd__line-height: var(--phd__line-height-compact);
    --phd__vertical-padding: var(--phd__vertical-padding-compact);
    --phd__horizontal-padding: var(--phd__horizontal-padding-compact);

}

.phd__button.btn-compact span{
    --phd__icon-size: var(--phd__icon-size-compact);
}



.phd__button.btn-large{
    --phd__font-size: var(--phd__font-size-large);
    --phd__line-height: var(--phd__line-height-large);
    --phd__vertical-padding: var(--phd__vertical-padding-large);
    --phd__horizontal-padding: var(--phd__horizontal-padding-large);

}

.phd__button.btn-large span{
    --phd__icon-size:var(--phd__icon-size-large);
}




.btn-secondary{
    --phd__button-main-color-rgb: var(--phd__color-secondary-rgb);
}


.btn-warning{
    --phd__button-main-color-rgb:  255, 77, 77;
}


.phd-button__display{
    display: flex;
    gap: .45rem;
    align-items: center;

}

.phd-button__display img{
    height: var(--phd__line-height);
    padding: .14em;
    width: auto;
    max-width: unset;
}