button.map-button {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    position: absolute !important;
    right: 1.5em;
    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.5s, color 0.5s;
    cursor: pointer;
}

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.locate-button-PERMISSION_DENIED {
    opacity: 0.7;
    cursor: default;
}

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

button.map-button.locate-button-LOCATING,
button.map-button.locate-button-ENABLED {
    background-color: var(--map-button-text-color);
    color: var(--map-button-bg-color);
}

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

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

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