/*
 * theme_mode: dark
 *
 * those are only the color definitions
 */

:root
{
    /* define colors*/
    --main-color-red: 219, 56, 56;
    --main-color-orange: 213, 155, 48;
    --main-color-yellow: 215, 215, 62;
    --main-color-green: 94, 205, 56;
    --main-color-white: 250, 250, 250;
    --main-color-black: 60, 60, 63;

    /* main elements */
    --main-bg-color: 60, 60, 63;
    --main-font-color: 250, 250, 250;
    --main-border-color: 43, 43, 45;
    --main-shadow-color: 218, 218, 218;
    --main-glow-color: 255, 217, 92;

    /* an element inside main-bg-color */
    --second-bg-color: 43, 43, 45;

    /* smt. you have dark background and need light font */
    --main-font-color-opposite: 60, 60, 63;

    /* apply to onsen */
    --text-color: rgba(var(--main-font-color), 1);
    --background-color: rgba(var(--main-bg-color), 1);
    --border-color: rgba(var(--main-border-color), 1);
    --toolbar-text-color: rgba(var(--main-font-color), 1);
    --toolbar-background-color: rgba(var(--main-bg-color), 1);
    --modal-text-color: rgba(var(--main-font-color), 1);
    --alert-dialog-background-color: rgba(var(--main-bg-color), 1);
    --alert-dialog-text-color: rgba(var(--main-font-color), 1);
    --popover-background-color: rgba(var(--main-bg-color), 1);
    --switch-checked-background-color: rgba(var(--main-color-green), 1);
    --list-item-chevron-color: var(--text-color);
    --progress-bar-secondary-color: rgba(var(--main-font-color), 0.2);
    --button-quiet-color: rgba(var(--highlight-color-rgb), 0.8);
    --action-sheet-title-color: rgba(var(--main-font-color), 1);
    --action-sheet-button-background-color: rgba(var(--main-bg-color), 1);
    --action-sheet-cancel-button-background-color: rgba(var(--second-bg-color), 1);
}

/**
 * convert black png to 250, 250, 250
 * @see https://codepen.io/sosuke/pen/Pjoqqp
 */
.gesture img
{
    --filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(288deg) brightness(107%) contrast(96%);
    filter: var(--filter);
    -webkit-filter: var(--filter);
}

.map_layer_background
{
    --filter: grayscale(100%) brightness(50%) contrast(130%);
    filter: var(--filter);
    -webkit-filter: var(--filter);
}

/* darken map layers */
.map_layer_radar, .features_WeatherStations, .DistanceCircles, .ForecastCirclePointsModel
{
    --filter: brightness(80%);
    filter: var(--filter);
    -webkit-filter: var(--filter);
}

.marker_userLocation
{
    border-radius: 50%;

    background-color: rgba(var(--main-color-white), 0.6);
}