/*  Theme colour variables */
:root {
    --baseR: 127;
    --baseG: 127;
    --baseB: 127;

    --color1: #191919;
    --color2: #333333;
    --color3: #4c4c4c;
    --color4: #666666;
    --color5: #7f7f7f;
    --color6: #999999;
    --color7: #b2b2b2;
    --color8: #cccccc;
    --color9: #e5e5e5;
    --modal: rgba( var(--baseR), var(--baseG), var(--baseB), 0.3);
    --menu: rgba( var(--baseR), var(--baseG), var(--baseB), 0.8);
    --shadow1: 0 0.3em 0.3em -1px var(--color5);
    --shadow2: 0.2em 0.2em rgb(var(--baseR), var(--baseG), var(--baseB), 80%), 0.6em 0.6em 0.6em rgb(var(--baseR), var(--baseG), var(--baseB), 50%);

    --gradient-down: linear-gradient( 0deg, var(--color7), var(--color5));
    --gradient-up: linear-gradient( 0deg,  var(--color5), var(--color7));
    --gradient-ltr: linear-gradient( 90deg,  var(--color7), var(--color5));
    --gradient-rtl: linear-gradient( 90deg,  var(--color5), var(--color7));
    --gradient-databar: linear-gradient( var(--color5) 0%, transparent 20%, transparent 80%, var(--color5) 100%);
}

/*  Combination colours foreground/background */
.ow-theme0 { color: inherit; background-color: inherit;}
.ow-theme1, .ow-theme1-hvr:hover { color: var(--color9); background-color: var(--color1);}
.ow-theme2, .ow-theme2-hvr:hover { color: var(--color9); background-color: var(--color2);}
.ow-theme3, .ow-theme3-hvr:hover { color: var(--color9); background-color: var(--color3);}
.ow-theme4, .ow-theme4-hvr:hover { color: var(--color9); background-color: var(--color4);}
.ow-theme5, .ow-theme5-hvr:hover { color: var(--color9); background: var(--color5);}
.ow-theme6, .ow-theme6-hvr:hover { color: var(--color1); background-color: var(--color6);}
.ow-theme7, .ow-theme7-hvr:hover { color: var(--color1); background-color: var(--color7);}
.ow-theme8, .ow-theme8-hvr:hover { color: var(--color1); background-color: var(--color8);}
.ow-theme9, .ow-theme9-hvr:hover { color: var(--color1); background-color: var(--color9)}

/* Gradients ~ You may wish to adjust the foreground colours used */
.ow-theme-grad-down            { background-color: var(--gradient-down);color: var(--color1)}
.ow-theme-grad-down-hvr:hover  { background-color: var(--gradient-down);color: var(--color9)}
.ow-theme-grad-up              { background-color: var(--gradient-up);color: var(--color1)}
.ow-theme-grad-up-hvr:hover    { background-color: var(--gradient-up);color: var(--color9)}
.ow-theme-grad-ltr             { background-color: var(--gradient-ltr);color: var(--color1)}
.ow-theme-grad-ltr-hvr:hover   { background-color: var(--gradient-ltr);color: var(--color9)}
.ow-theme-grad-rtl             { background-color: var(--gradient-rtl);color: var(--color1)}
.ow-theme-grad-rtl-hvr:hover   { background-color: var(--gradient-rtl);color: var(--color9)}

/*  Gradients */
.ow-theme-grad-down, .ow-theme-grad-down-hvr:hover { background: var(--gradient-down); color: var(--color2);}
.ow-theme-grad-up, .ow-theme-grad-up-hvr:hover { background: var(--gradient-up); color: var(--color2);}
.ow-theme-grad-rtl, .ow-theme-grad-rtl-hvr:hover { background: var(--gradient-rtl); color: var(--color2);}
.ow-theme-grad-ltr, .ow-theme-grad-ltr-hvr:hover { background: var(--gradient-ltr); color: var(--color2);}

/*  Colors for text only settings */
.ow-theme0-txt, .ow-theme0-txt-hvr:hover { color: inherit};
.ow-theme1-txt, .ow-theme1-txt-hvr:hover { color: var(--color1);}
.ow-theme2-txt, .ow-theme2-txt-hvr:hover { color: var(--color2);}
.ow-theme3-txt, .ow-theme3-txt-hvr:hover { color: var(--color3);}
.ow-theme4-txt, .ow-theme4-txt-hvr:hover { color: var(--color4);}
.ow-theme5-txt, .ow-theme5-txt-hvr:hover { color: var(--color5);}
.ow-theme6-txt, .ow-theme6-txt-hvr:hover { color: var(--color6);}
.ow-theme7-txt, .ow-theme7-txt-hvr:hover { color: var(--color7);}
.ow-theme8-txt, .ow-theme8-txt-hvr:hover { color: var(--color8);}
.ow-theme9-txt, .ow-theme9-txt-hvr:hover { color: var(--color9);}

/* Border only colours */
.ow-theme1-bdr, .ow-theme1-bdr-hvr:hover { border-color: var(--color1);}
.ow-theme2-bdr, .ow-theme2-bdr-hvr:hover { border-color: var(--color2);}
.ow-theme3-bdr, .ow-theme3-bdr-hvr:hover { border-color: var(--color3);}
.ow-theme4-bdr, .ow-theme4-bdr-hvr:hover { border-color: var(--color4);}
.ow-theme5-bdr, .ow-theme5-bdr-hvr:hover { border-color: var(--color5);}
.ow-theme6-bdr, .ow-theme6-bdr-hvr:hover { border-color: var(--color6);}
.ow-theme7-bdr, .ow-theme7-bdr-hvr:hover { border-color: var(--color7);}
.ow-theme8-bdr, .ow-theme8-bdr-hvr:hover { border-color: var(--color8);}
.ow-theme9-bdr, .ow-theme9-bdr-hvr:hover { border-color: var(--color9);}

/* Background only colours */
.ow-theme1-bkg, .ow-theme1-bkg-hvr:hover { background-color: var(--color1);}
.ow-theme2-bkg, .ow-theme2-bkg-hvr:hover { background-color: var(--color2);}
.ow-theme3-bkg, .ow-theme3-bkg-hvr:hover { background-color: var(--color3);}
.ow-theme4-bkg, .ow-theme4-bkg-hvr:hover { background-color: var(--color4);}
.ow-theme5-bkg, .ow-theme5-bkg-hvr:hover { background-color: var(--color5);}
.ow-theme6-bkg, .ow-theme6-bkg-hvr:hover { background-color: var(--color6);}
.ow-theme7-bkg, .ow-theme7-bkg-hvr:hover { background-color: var(--color7);}
.ow-theme8-bkg, .ow-theme8-bkg-hvr:hover { background-color: var(--color8);}
.ow-theme9-bkg, .ow-theme9-bkg-hvr:hover { background-color: var(--color9);}


/*  Extras */
.ow-theme-modal { background-color: var(--modal);}
.ow-theme-menu { background-color: var(--menu);}
.ow-theme-shadow1, .ow-theme-shadow1-hvr:hover {box-shadow: var(--shadow1);}
.ow-theme-shadow2, .ow-theme-shadow2-hvr:hover { box-shadow: var(--shadow2);}