div.map-button-container {
    position: relative;
    pointer-events: initial;
}

button.map-button {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--map-button-bg-color);
    width: 3em;
    height: 3em;
    border-radius: 1.5em;
    color: var(--map-button-text-color);
    border: none;
    box-shadow: 0px 5px 10px rgba(136, 136, 136, 0.5);
    transition: background-color 0.25s, color 0.25s;
    cursor: pointer;
    margin: 0.5em;
}

button.map-button:hover {
    background-color: var(--map-button-hover-bg-color);
    color: var(--map-button-hover-text-color);
}

button.map-button-active {
    background-color: var(--map-button-active-bg-color);
    color: var(--map-button-active-text-color);
}

button.map-button-disabled {
    opacity: 0.7;
    cursor: default;
}

button.map-button-disabled:hover {
    background-color: var(--map-button-bg-color);
    color: var(--map-button-text-color);
}

button.map-button-engaged {
    background-color: yellow;
    color: var(--map-button-bg-color);
}

button.map-button > div.spinner {
    width: 1.5em;
    height: 1.5em;
}