/*
 * overall styles for the basemap bar control
 */
div.leaflet-control-basemapbar {
    display: flex;
    flex-direction: row;

    border: 2px solid #000000;
    border-radius: 0;
    box-shadow: 0 1px 5px rgba(0,0,0,0.65);

    color: #222;
    font-weight: bold;
    background-color:white;
    cursor: pointer;
}

div.leaflet-control-basemapbar button {
    display: inline-block;
    border: none;
    cursor: pointer;
    color: black;
    background-color: white;
}

/* div.leaflet-control-basemapbar button.leaflet-control-basemapbar-open:focus {
    outline-offset: 3px;
    border-radius: 1px;
    box-shadow: none;
} */


div.leaflet-control-basemapbar button:focus {		
    outline: 2px #FFFFFF solid !important;
    box-shadow: 0 0 0 6px #000000 !important;
    outline-offset: 2px !important;
    z-index: 150 !important;
}

.leaflet-control-basemapbar > div {
    height: 1.875rem;
    cursor: pointer;
}


/*
 * basic concept of being opened/closed
 */

.leaflet-control-basemapbar .leaflet-control-basemapbar-hidden {
    display: none !important;
}


/*
 * styles for the base map options
 */

.leaflet-control-basemapbar .leaflet-control-basemapbar-option {
    font-size: 0.938rem;
    padding: 0.35rem 0.5rem;
    border-right: 1px solid #000;

    /* needed so that the focus outline is visible when the button is selected */
    /* works in conjunction with button focus outline styles, above */
    position: relative;
}
.leaflet-control-basemapbar .leaflet-control-basemapbar-option[aria-pressed="true"] {
    color: white !important;
    background-color: black !important;
}
.leaflet-control-basemapbar .leaflet-control-basemapbar-option:hover {
    background: #e0e0e0;
}


/*˜
 * styles for the open & close buttons
 */

.leaflet-control-basemapbar .leaflet-control-basemapbar-open {
    font-size: 0.938rem;
    padding: 0.35rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.leaflet-control-basemapbar .leaflet-control-basemapbar-open span {
    width: 1.25rem;
    height: 1.24rem;
    display: inline-block;
    text-align: center;
    margin-right: 0.5rem;
    background: transparent url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100pt" height="100pt" version="1.1" viewBox="0 0 100 100"> <path d="m71.867 12.094c-2.8398-2.793-7.418-2.793-10.262 0l-33.473 32.867c-2.8438 2.7891-2.8438 7.2891 0 10.078l33.473 32.867c2.8438 2.793 7.4219 2.793 10.262 0 2.8438-2.7891 2.8438-7.2852 0-10.078l-28.316-27.855 28.316-27.801c2.8438-2.793 2.7891-7.3906 0-10.078z"/></svg>') center/1.25rem auto no-repeat;
}

.leaflet-control-basemapbar .leaflet-control-basemapbar-close {
    padding: 0 0.95rem;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}