@CHARSET "UTF-8";

/*
 * The date-range-picker.variables.css file contains global variables for the Date Range Picker component store theme settings
 * The stylesheet has the next customisations:
 * - `theme-default` - the html tag CSS class for the GENERAL store theme
 * - `theme-jewel-360` - the html tag CSS class for the JEWEL store theme
*/

:root {
    --date-range-picker-general-background: #fff;
    --date-range-picker-general-border: #ccc;

    --date-range-picker-cell-hover-background: #eee;
    --date-range-picker-cell-in-range-color: #000;
    --date-range-picker-cell-in-range-background: #ebf4f8;

    --date-range-picker-cell-active-color: #fff;
    --date-range-picker-cell-active-background: #357ebd;

    --date-range-picker-cell-unselected-color: #999;
    --date-range-picker-cell-unselected-background: #fff;

    --date-range-picker-control-default-color: #555;
    --date-range-picker-control-default-border: #ccc;
    --date-range-picker-control-active-border: #08c;
    --date-range-picker-control-disabled-color: #ccc;

    --date-range-picker-range-default-color: #357ebd;
    --date-range-picker-range-default-background: #f5f5f5;
    --date-range-picker-range-default-border: #f5f5f5;
    --date-range-picker-range-hover-color: #fff;
    --date-range-picker-range-hover-background: #357ebd;
    --date-range-picker-range-hover-border: #357ebd;
    --date-range-picker-range-active-color: #fff;
    --date-range-picker-range-active-background: #357ebd;
    --date-range-picker-range-active-border: #357ebd;
}

:root.theme-jewel-360 {
    --date-range-picker-cell-active-background: #0E333C;

    --date-range-picker-control-active-border: #0E333C;

    --date-range-picker-range-default-color: #36555C;
    --date-range-picker-range-hover-background: #36555C;
    --date-range-picker-range-hover-border: #36555C;
    --date-range-picker-range-active-background: #0E333C;
    --date-range-picker-range-active-border: #0E333C;
}
