.abinb-panel {
    z-index: 1;  
    -webkit-user-select: none;
    user-select: none;
}

.abinb-panel > div {
    -webkit-font-smoothing: antialiased;
    z-index: 0;
}

.abinb-panel button[aria-expanded=true] + div { 
    -webkit-touch-callout: none;
    display: block;
}

.abinb-panel button[aria-expanded=false] + div {
    display: none;
}

.abinb-panel {
    position: relative;
    /*! top: -.25rem; */
    border: none;
    font-family: Arial, sans-serif;
    font-size: 100%;
}

.abinb-panel.abinb-expanded {
    box-shadow: 0px 0px 7px black;
    padding: .5rem;
    padding-bottom: 10px;
    border: 2px var(--abinb-border-color) solid;
    position: fixed;
    background-color: rgb(var(--abinb-page-background-color));
}

.abinb-panel:not(.abinb-expanded) {
    height: min-content;
    width: min-content;
}

/* the hamburger */
.abinb-panel:hover > button, .abinb-panel.abinb-expanded > button {
    opacity: 100%;
}
.abinb-panel.abinb-expanded > button > svg:first-child {
    display: none;
}
.abinb-panel.abinb-expanded > button > svg:last-child {
    display: block;
}
.abinb-panel:not(.abinb-expanded) > button > svg:first-child {
    display: block;
}
.abinb-panel:not(.abinb-expanded) > button > svg:last-child {
    display: none;
}
/* make close "X" button icon smaller than the default icon size */
.abinb-panel.abinb-expanded > button .abinb-iconify {
    width: calc(var(--abinb-icons)/2);
    height: calc(var(--abinb-icons)/2);
    transition: .2s;
}