:root{
    --opac-disp-button-color: black;
    --opac-add-to-button-color: var(--primary_color_dark, black);
    --opac-add-to-button-text-color: black;
}

.opac-disp-button,
/* Style spécifiquement sur les <a> pour overrider d'autres css...*/ 
a.opac-disp-button { 
    transition: 0.3s;
    border: 1px solid color-mix(in srgb, var(--opac-disp-button-color) 75%, transparent);
    border-radius: 4px;
    color: var(--opac-disp-button-color);
    background: transparent;
    padding-inline: 1rem;
    padding-block: .5rem;
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    position: relative;
    z-index: 1;
}
.opac-disp-button:hover, 
.opac-disp-button:active, 
.opac-disp-button:focus,
/* Style spécifiquement sur les <a> pour overrider d'autres css...*/ 
a.opac-disp-button:hover, 
a.opac-disp-button:active, 
a.opac-disp-button:focus  {
    border-color: var(--opac-disp-button-color);
    color: black;
    background-color: color-mix(in srgb, var(--opac-disp-button-color) 10%, transparent);
    text-decoration: none;
}

.opac-disp-button svg {
    margin-left: .25rem;
}

.opac-add-to-button,
/* Style spécifiquement sur les <a> pour overrider d'autres css...*/ 
a.opac-add-to-button {
    transition: 0.3s;
    border: 1px solid var(--opac-add-to-button-color);
    color: white;
    background: var(--opac-add-to-button-color);
    width: 45px;
    padding: 0;
    aspect-ratio: 1 / 1;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    position: relative;
    z-index: 1;
}
.opac-add-to-button:hover, 
.opac-add-to-button:active, 
.opac-add-to-button:focus,
/* Style spécifiquement sur les <a> pour overrider d'autres css...*/ 
a.opac-add-to-button:hover, 
a.opac-add-to-button:active, 
a.opac-add-to-button:focus {
    border-color: var(--opac-add-to-button-color);
    color: var(--opac-add-to-button-color);
    background-color: color-mix(in srgb, var(--opac-add-to-button-color) 10%, transparent);
    text-decoration: none;
}

.opac-add-to-button svg {
    height: 1.5em;
}

.opac-add-to-button-text-version,
/* Style spécifiquement sur les <a> pour overrider d'autres css...*/ 
a.opac-add-to-button-text-version {
    height: 32px;
    padding-inline: 14px;
    gap: 3px;
    border-radius: 35px;
    border: 1px solid color-mix(in srgb, var(--opac-add-to-button-text-color) 15%, transparent);
    background: transparent;
    color: var(--opac-add-to-button-text-color);
    text-decoration: none;
    display: flex;
    align-items: center;
}
.opac-add-to-button-text-version:hover, 
.opac-add-to-button-text-version:active, 
.opac-add-to-button-text-version:focus,
/* Style spécifiquement sur les <a> pour overrider d'autres css...*/ 
a.opac-add-to-button-text-version:hover, 
a.opac-add-to-button-text-version:active, 
a.opac-add-to-button-text-version:focus {
    border-color: var(--opac-add-to-button-text-color);
    color: white;
    background-color: var(--opac-add-to-button-text-color);
    text-decoration: none;
}

.opac-add-to-button-text-version svg {
    height: 1em;
    margin-right: .25rem;
}