/*
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/

#mapbox {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

/*
TODO: Change image based on place health/strength {0,1,2}.png
*/
#mapbox .place-marker {
    width: 10em;
    height: 10em;
    background-image: url(../img/place/2.png);
    background-size: contain;
}


/*
Colorize images for map display

CSS filters made with https://codepen.io/sosuke/pen/Pjoqqp
*/

/*
TODO: Adjust green and lightblue for better map visibility
*/
.color-filter-red {
    filter: brightness(0) saturate(100%) invert(43%) sepia(63%) saturate(6607%) hue-rotate(344deg) brightness(111%) contrast(101%);
}

.color-filter-green {
    filter: brightness(0) saturate(100%) invert(82%) sepia(6%) saturate(5468%) hue-rotate(70deg) brightness(96%) contrast(76%);
}

.color-filter-blue {
    filter: brightness(0) saturate(100%) invert(51%) sepia(33%) saturate(1529%) hue-rotate(172deg) brightness(94%) contrast(104%);
}

.color-filter-pink {
    filter: brightness(0) saturate(100%) invert(54%) sepia(96%) saturate(5960%) hue-rotate(330deg) brightness(99%) contrast(106%);
}

.color-filter-yellow {
    filter: brightness(0) saturate(100%) invert(76%) sepia(89%) saturate(2826%) hue-rotate(8deg) brightness(112%) contrast(103%);
}

.color-filter-orange {
    filter: brightness(0) saturate(100%) invert(53%) sepia(77%) saturate(1004%) hue-rotate(359deg) brightness(103%) contrast(108%);
}

.color-filter-purple {
    filter: brightness(0) saturate(100%) invert(18%) sepia(61%) saturate(4153%) hue-rotate(281deg) brightness(95%) contrast(89%);
}

.color-filter-deeppurple {
    filter: brightness(0) saturate(100%) invert(26%) sepia(27%) saturate(4860%) hue-rotate(246deg) brightness(89%) contrast(93%);
}

.color-filter-lightblue {
    filter: brightness(0) saturate(100%) invert(78%) sepia(10%) saturate(4807%) hue-rotate(168deg) brightness(99%) contrast(98%);
}

.color-filter-teal {
    filter: brightness(0) saturate(100%) invert(32%) sepia(93%) saturate(1351%) hue-rotate(149deg) brightness(94%) contrast(101%);
}

.color-filter-lime {
    filter: brightness(0) saturate(100%) invert(80%) sepia(12%) saturate(1890%) hue-rotate(22deg) brightness(95%) contrast(114%);
}

.color-filter-deeporange {
    filter: brightness(0) saturate(100%) invert(67%) sepia(41%) saturate(6786%) hue-rotate(342deg) brightness(98%) contrast(106%);
}

.color-filter-gray {
    filter: brightness(0) saturate(100%) invert(64%) sepia(7%) saturate(162%) hue-rotate(202deg) brightness(87%) contrast(86%);
}

.color-filter-white {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
}

.color-filter-black {
    filter: brightness(0) saturate(100%) invert(0%) sepia(100%) saturate(7432%) hue-rotate(210deg) brightness(88%) contrast(115%);
}