.clientSettingsButton {
    position: relative;
    height: 3.5rem;
    width: 3.5rem;
    margin: 0.25rem;    

    display: flex;
    justify-content: center;
    align-items: center;

    padding-left: 0.25rem;
    padding-right: 0.25rem;

}

.clientSettingsButton::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 0.375rem;
    padding: 2px;
    background: linear-gradient(45deg, #00DDFF, #DD00FF);
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;


    transition: 0.2s ease;
}

.clientSettingsButton img {
    color: inherit;
}

/* .clientSettingsButton {
    height: 3.5rem;
    margin: 0.25rem;
    border-radius: 0.375rem;
    align-items: center;
    padding: 0;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    color: #00DDFF;
    
    border: 0px solid transparent;
    
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    
    background: linear-gradient(to top right, #00DDFF 0%, #DD00FF 100%);    
} */
/* background-color: #222; */
/* border: 2px solid #00DDFF; */
/* border-image: linear-gradient(to top right, #00DDFF 0%, #DD00FF 100%) 1; */



.clientSettingsButton:active::before {
    background: linear-gradient(135deg, #00DDFF, #DD00FF);

}

.clientSettingsButton img {
    height: 90%;
    vertical-align: middle;
    border-style: none;
}