@zohodesk/components
Version:
Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development
396 lines (364 loc) • 41.8 kB
CSS
[data-mode='pureDark']{
/* list common */
--dot_inputPlaceholder:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(34.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--dot_inputDisable:hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--dot_inputLine:var(--zdt_cta_grey_35_border);
--dot_inputLineHover:hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
--dot_inputLineFocus:var(--zdt_cta_primary_border);
--dot_listItemHover:var(--zdtm_cta_grey_10_bg_default_inverse_low);
--dot_listItemActive:var(--zdtm_cta_primary_light_bg_default_inverse_low);
/* common */
--zdt_disable_bg:hsla(217, calc(var(--zd-saturation, 1) * 22.81%), 11.18%, 0.5);
--zdt_contrast_shadow:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%, 1);
/* avatar */
--zdt_avatar_default_text:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_avatar_default_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
--zdt_avatar_default_border:var(--zdt_cta_grey_40_border);
--zdt_avatar_default_borderHover:hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
--zdt_avatar_default_boxshadow:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%, 0.14);
--zdt_avatar_white_borderHover:var(--zdt_cta_grey_40_border);
--zdt_avatar_white_boxshadow:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 0.00%, 0.11);
--zdt_avatar_secondary_bg:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
--zdt_avatar_info_bg:var(--dot_mirror);
/* avatar team */
--zdt_avatarteam_default_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
--zdt_avatarteam_default_border:var(--dot_mirror);
--zdt_avatarteam_primary_bg:var(--zdtm_cta_grey_40_bg_default);
--zdt_avatarteam_primary_hover_bg:hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_avatarteam_secondary_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
--zdt_avatarteam_nofill_border:var(--zdt_cta_grey_40_border);
--zdt_avatarteam_nofill_hover_border:hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
--zdt_avatarteam_innerCircle:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 12.94%, 1);
/* button */
--zdt_button_default_text:var(--zdt_cta_alpha_text);
--zdt_button_default_bg:var(--dot_mirror);
--zdt_button_default_border:var(--zdt_cta_alpha_border);
--zdt_button_primary_hover_text:var(--zdt_cta_alpha_hover_text);
--zdt_button_primary_hover_border:var(--zdt_cta_alpha_hover_border);
--zdt_button_primary_box_shadow:var(--zdt_cta_primary_box_shadow);
--zdt_button_plainprimary_hover_text:var(--zdt_cta_primary_hover_text);
--zdt_button_secondary_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_button_secondary_hover_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_button_secondary_border:var(--zdt_cta_grey_35_border);
--zdt_button_secondary_hover_border:hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
--zdt_button_danger_border:hsla(0, calc(var(--zd-saturation, 1) * 100.00%), calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
--zdt_button_success_hover_border:hsla(134, calc(var(--zd-saturation, 1) * 67.66%), calc(32.75% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
--zdt_button_success_border:hsla(133, calc(var(--zd-saturation, 1) * 48.36%), calc(52.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_button_success_hover_text:hsla(134, calc(var(--zd-saturation, 1) * 67.66%), calc(32.75% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
--zdt_button_success_text:hsla(133, calc(var(--zd-saturation, 1) * 48.36%), calc(52.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_button_danger_text:hsla(0, calc(var(--zd-saturation, 1) * 100.00%), calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
--zdt_button_danger_hover_border:hsla(1, calc(var(--zd-saturation, 1) * 63.86%), calc(48.82% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
--zdt_button_danger_hover_text:hsla(1, calc(var(--zd-saturation, 1) * 63.86%), calc(48.82% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
--zdt_button_danger_box_shadow:hsla(355, calc(var(--zd-saturation, 1) * 84.89%), 55.88%, 0.3);
--zdt_button_primaryfill_text:var(--zdt_cta_secondary_text);
--zdt_button_primaryfill_bg:var(--zdt_cta_primary_bg);
--zdt_button_primaryfill_border:var(--dot_mirror);
--zdt_button_primaryfill_hover_bg:var(--zdt_cta_primary_hover_bg);
--zdt_button_secondaryfill_bg:var(--zdtm_cta_grey_10_bg_default_inverse_lower);
--zdt_button_dangerfill_bg:hsla(0, calc(var(--zd-saturation, 1) * 100.00%), calc(70.98% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_button_dangerfill_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
--zdt_button_dangerfill_hover_bg:hsla(1, calc(var(--zd-saturation, 1) * 63.86%), calc(48.82% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_button_successfill_bg:hsla(133, calc(var(--zd-saturation, 1) * 48.36%), calc(52.16% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_button_successfill_border:hsla(133, calc(var(--zd-saturation, 1) * 48.36%), calc(52.16% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_button_successfill_hover_border:hsla(134, calc(var(--zd-saturation, 1) * 67.66%), calc(32.75% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
--zdt_button_successfill_hover_bg:hsla(134, calc(var(--zd-saturation, 1) * 67.66%), calc(32.75% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_button_tertiaryfill_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(60.00% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_button_tertiaryfill_hover_bg:hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_button_success_default_border:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
--zdt_button_tick_primary_border:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
--zdt_button_loading_default_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
--zdt_button_loading_default_border:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
--zdt_button_dangerFilled_strike:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
--zdt_button_success_strike:hsla(133, calc(var(--zd-saturation, 1) * 48.36%), calc(52.16% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
--zdt_button_successFilled_strike:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
--zdt_button_danger_strike:hsla(0, calc(var(--zd-saturation, 1) * 77.78%), calc(61.18% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
--zdt_button_tertiaryFilled_strike:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
/* button group */
--zdt_buttongroup_default_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
--zdt_buttongroup_default_border:hsla(204, calc(var(--zd-saturation, 1) * 10.64%), calc(90.78% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
--zdt_buttongroup_footer_box_shadow:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 0.00%, 0.1);
/* checkbox */
--zdt_checkbox_default_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
--zdt_checkbox_default_stroke_border:hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
--zdt_checkbox_primary_stroke_border:var(--zdt_cta_beta_border);
--zdt_checkbox_danger_stroke_border:hsla(0, calc(var(--zd-saturation, 1) * 100.00%), calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
--zdt_checkbox_label_primary_text:var(--zdt_cta_primary_text);
--zdt_checkbox_label_danger_text:hsla(0, calc(var(--zd-saturation, 1) * 100.00%), calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
--zdt_checkbox_secondary_text:hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
/* dropbox */
--zdt_dropbox_default_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
--zdt_dropbox_default_box_shadow:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 0.00%, 0.5);
--zdt_dropbox_arrow_shadow:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 0.00%, 0.1);
--zdt_dropbox_mob_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(0.00% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
--zdt_dropbox_mob_close_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(83.53% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
/* label */
--zdt_label_default_text:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_label_primary_text:hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_label_secondary_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_label_danger_text:hsla(37, calc(var(--zd-saturation, 1) * 90.95%), calc(60.98% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_label_mandatory_text:hsla(0, calc(var(--zd-saturation, 1) * 100.00%), calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
--zdt_label_disable_text:var(--dot_inputDisable);
/* tag */
--zdt_tag_default_text:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_tag_default_bg:var(--zdt_cta_grey_20_bg);
--zdt_tag_default_border:var(--dot_mirror);
--zdt_tag_default_hover_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(21.96% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
--zdt_tag_secondary_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
--zdt_tag_secondary_bg:hsla(217, calc(var(--zd-saturation, 1) * 12.16%), calc(29.02% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_tag_secondary_hover_bg:hsla(216, calc(var(--zd-saturation, 1) * 9.93%), calc(29.61% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_tag_closedanger_bg:hsla(0, calc(var(--zd-saturation, 1) * 72.25%), calc(59.02% + var(--zdc_darker_low)), calc( 0.9 + var(--zdc_alpha_low)));
--zdt_tag_icon_bg:var(--dot_mirror);
--zdt_tag_disabled_text:var(--dot_inputDisable);
--zdt_tag_danger_bg:hsla(0, calc(var(--zd-saturation, 1) * 100.00%), calc(70.98% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_tag_danger_hover_bg:hsla(317, calc(var(--zd-saturation, 1) * 22.14%), calc(25.69% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_tag_primary_bg:var(--zdtm_cta_primary_bg_default_inverse);
--zdt_tag_primary_hover_bg:var(--zdtm_cta_primary_hover_bg_default_inverse);
--zdt_tag_primary_border:var(--zdt_cta_primary_light_border);
--zdt_tag_closeprimary_bg:var(--zdtm_cta_primary_bg_default_inverse);
--zdt_tag_default_danger_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(18.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_tag_active_default_bg:var(--zdt_cta_primary_light_bg);
--zdt_tag_pure_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(12.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_tag_pure_border:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(87.84% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
--zdt_tag_pure_hover_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(93.73% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_tag_pure_hover_border:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(60.00% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
--zdt_tag_dark_close_hover_bg:hsla(0, calc(var(--zd-saturation, 1) * 71.91%), calc(53.92% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_tag_defaultLink_hover_bg:var(--zdtm_cta_alpha_bg_default_inverse_lower);
--zdt_tag_defaultLink_hover_text:var(--zdt_cta_primary_text);
/* textbox */
--zdt_textbox_default_text:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_textbox_default_bg:var(--dot_mirror);
--zdt_textbox_default_border:var(--dot_inputLine);
--zdt_textbox_placeholder_text:var(--dot_inputPlaceholder);
--zdt_textbox_disabled_text:var(--dot_inputDisable);
--zdt_textbox_transparent_border:var(--dot_mirror);
--zdt_textbox_effect_hover_border:var(--dot_inputLineHover);
--zdt_textbox_effect_focus_border:var(--dot_inputLineFocus);
--zdt_textbox_secondary_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
/* dropdown */
--zdt_dropdown_default_text:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_dropdown_default_border:var(--dot_mirror);
--zdt_dropdown_default_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(60.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
--zdt_dropdown_darkheading_bg:hsla(226, calc(var(--zd-saturation, 1) * 21.68%), calc(28.04% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
--zdt_dropdown_darkheading_underline_bg:hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
--zdt_dropdown_mirror_bg:var(--dot_mirror);
--zdt_dropdown_user_default_border:hsla(0, calc(var(--zd-saturation, 1) * 2.33%), calc(8.43% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
--zdt_dropdown_listactive_border:var(--zdt_cta_primary_border);
--zdt_dropdown_listactive_bg:hsla(213, calc(var(--zd-saturation, 1) * 19.57%), calc(18.04% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
--zdt_dropdown_listhover_bg:var(--zdt_cta_grey_10_bg);
/* radio */
--zdt_radio_default_stroke:hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_radio_default_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
--zdt_radio_primary_stroke:var(--zdt_cta_primary_border);
--zdt_radio_primary_fill:var(--zdtm_cta_primary_bg_default_inverse_low);
--zdt_radio_danger_stroke:hsla(0, calc(var(--zd-saturation, 1) * 100.00%), calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
--zdt_radio_danger_fill:hsla(0, calc(var(--zd-saturation, 1) * 100.00%), calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
--zdt_radio_label_primary_text:var(--zdt_cta_primary_text);
--zdt_radio_label_danger_text:hsla(0, calc(var(--zd-saturation, 1) * 100.00%), calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
--zdt_radio_secondary_text:hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
/* listitem */
--zdt_listitem_default_text:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_listitem_secondaryfield_text:hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_listitem_default_border:var(--dot_mirror);
--zdt_listitem_default_bg:var(--dot_mirror);
--zdt_listitem_default_tickicon:var(--zdt_cta_primary_text);
--zdt_listitem_highlight_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(14.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_listitem_active_border:var(--zdt_cta_primary_border);
--zdt_listitem_primary_bg:var(--dot_listItemActive);
--zdt_listitem_secondary_bg:var(--zdtm_cta_primary_bg_default);
--zdt_listitem_danger_bg:hsla(0, calc(var(--zd-saturation, 1) * 100.00%), 70.98%, 0.05);
--zdt_listitem_danger_text:hsla(0, calc(var(--zd-saturation, 1) * 100.00%), calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
--zdt_listitem_secondary_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(12.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
/* ribbon */
--zdt_ribbon_default_text:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_ribbon_default_bg:var(--dot_mirror);
--zdt_ribbon_default_border:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(40.00% + var(--zdc_default_inverse_medium)), calc( 0.1 + var(--zdc_alpha_low)));
--zdt_ribbon_default_tag_border:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(79.22% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
--zdt_ribbon_default_shadow:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 40.00%, 0.1);
--zdt_ribbon_default_stamp_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(40.00% + var(--zdc_darker_low)), calc( 0.1 + var(--zdc_alpha_low)));
--zdt_ribbon_white_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
--zdt_ribbon_white_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
--zdt_ribbon_palette_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(40.00% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_ribbon_danger_bg:hsla(0, calc(var(--zd-saturation, 1) * 100.00%), calc(70.98% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_ribbon_danger_text:hsla(0, calc(var(--zd-saturation, 1) * 100.00%), calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
--zdt_ribbon_danger_shadow:hsla(355, calc(var(--zd-saturation, 1) * 84.89%), 55.88%, 0.1);
--zdt_ribbon_danger_border:hsla(355, calc(var(--zd-saturation, 1) * 84.89%), calc(55.88% + var(--zdc_default_inverse_medium)), calc( 0.1 + var(--zdc_alpha_low)));
--zdt_ribbon_danger_stamp_bg:hsla(355, calc(var(--zd-saturation, 1) * 84.89%), calc(55.88% + var(--zdc_darker_low)), calc( 0.1 + var(--zdc_alpha_low)));
--zdt_ribbon_primary_bg:hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(63.92% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_ribbon_primary_text:hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(63.92% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_ribbon_primary_shadow:hsla(208, calc(var(--zd-saturation, 1) * 84.96%), 55.69%, 0.1);
--zdt_ribbon_primary_border:hsla(208, calc(var(--zd-saturation, 1) * 84.96%), calc(55.69% + var(--zdc_default_inverse_medium)), calc( 0.1 + var(--zdc_alpha_low)));
--zdt_ribbon_primary_stamp_bg:hsla(208, calc(var(--zd-saturation, 1) * 84.96%), calc(55.69% + var(--zdc_darker_low)), calc( 0.1 + var(--zdc_alpha_low)));
--zdt_ribbon_secondary_bg:hsla(123, calc(var(--zd-saturation, 1) * 57.52%), calc(55.69% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_ribbon_secondary_text:hsla(123, calc(var(--zd-saturation, 1) * 57.52%), calc(55.69% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_ribbon_secondary_shadow:hsla(130, calc(var(--zd-saturation, 1) * 79.56%), 44.12%, 0.1);
--zdt_ribbon_secondary_border:hsla(130, calc(var(--zd-saturation, 1) * 79.56%), calc(44.12% + var(--zdc_default_inverse_medium)), calc( 0.1 + var(--zdc_alpha_low)));
--zdt_ribbon_secondary_stamp_bg:hsla(130, calc(var(--zd-saturation, 1) * 79.56%), calc(44.12% + var(--zdc_darker_low)), calc( 0.1 + var(--zdc_alpha_low)));
--zdt_ribbon_info_bg:hsla(28, calc(var(--zd-saturation, 1) * 93.75%), calc(56.08% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_ribbon_info_text:hsla(28, calc(var(--zd-saturation, 1) * 93.75%), calc(56.08% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_ribbon_info_shadow:hsla(28, calc(var(--zd-saturation, 1) * 93.75%), 56.08%, 0.1);
--zdt_ribbon_info_border:hsla(28, calc(var(--zd-saturation, 1) * 93.75%), calc(56.08% + var(--zdc_default_inverse_medium)), calc( 0.1 + var(--zdc_alpha_low)));
--zdt_ribbon_info_stamp_bg:hsla(28, calc(var(--zd-saturation, 1) * 93.75%), calc(56.08% + var(--zdc_darker_low)), calc( 0.1 + var(--zdc_alpha_low)));
--zdt_ribbon_dark_bg:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_ribbon_dark_shadow:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 0.00%, 0.2);
--zdt_ribbon_dark_border:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(0.00% + var(--zdc_default_inverse_medium)), calc( 0.2 + var(--zdc_alpha_low)));
--zdt_ribbon_dark_stamp_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(0.00% + var(--zdc_darker_low)), calc( 0.1 + var(--zdc_alpha_low)));
--zdt_ribbon_plain_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(40.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_ribbon_flag_mirror_border:var(--zd_mirror);
--zdt_ribbon_flag_white_border:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
/* stencils */
--zdt_stencil_primary_bg:var(--zdt_cta_grey_10_bg);
--zdt_stencil_secondary_bg:var(--zdt_cta_grey_15_bg);
/* switch */
--zdt_switch_default_off_bg:var(--zdt_cta_grey_35_border);
--zdt_switch_default_on_bg:hsla(133, calc(var(--zd-saturation, 1) * 48.36%), 52.16%, 1);
--zdt_switch_circle_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
--zdt_switch_circle_shadow:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 46.67%, 1);
--zdt_switch_effect_off_bg:var(--zdtm_cta_grey_40_bg_default_inverse_low);
/* textboxicon */
--zdt_textboxicon_default_line_bg:var(--dot_inputLine);
--zdt_textboxicon_default_icon:hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_textboxicon_hover_icon:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_textboxicon_hover_line_bg:var(--dot_inputLineHover);
--zdt_textboxicon_transparent_line_bg:var(--dot_mirror);
--zdt_textboxicon_focus_line_bg:var(--dot_inputLineFocus);
--zdt_textboxicon_error_line_bg:hsla(1, calc(var(--zd-saturation, 1) * 63.86%), calc(48.82% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
/* textarea */
--zdt_textarea_default_text:var(--dot_inputDisable);
--zdt_textarea_default_bg:var(--dot_mirror);
--zdt_textarea_default_border:var(--dot_inputLine);
--zdt_textarea_placeholder_text:var(--dot_inputPlaceholder);
--zdt_textarea_transparent_border:var(--dot_mirror);
--zdt_textarea_hover_border:var(--dot_inputLineHover);
--zdt_textarea_focus_border:var(--dot_inputLineFocus);
--zdt_textarea_black_text:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
/* tooltip */
--zdt_tooltip_default_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 34.51%, 1);
--zdt_tooltip_default_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%, 1);
--zdt_tooltip_default_box_shadow:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 0.00%, 0.35);
/* select */
--zdt_select_emptystate_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_select_disable_text:var(--dot_inputDisable);
/* multiselect */
--zdt_multiselect_default_border:var(--dot_inputLine);
--zdt_multiselect_transparent_border:var(--dot_mirror);
--zdt_multiselect_default_hover_border:var(--dot_inputLineHover);
--zdt_multiselect_transparent_hover_border:var(--dot_inputLineHover);
--zdt_multiselect_dark_hover_border:hsla(229, calc(var(--zd-saturation, 1) * 8.25%), calc(61.96% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
--zdt_multiselect_default_active_border:var(--dot_inputLineFocus);
--zdt_multiselect_transparent_active_border:var(--dot_inputLineFocus);
--zdt_multiselect_dark_active_border:hsla(229, calc(var(--zd-saturation, 1) * 8.25%), calc(61.96% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
--zdt_multiselect_delete_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_multiselect_delete_bg:var(--dot_mirror);
--zdt_multiselect_delete_hover_text:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_multiselect_darkdelete_text:hsla(228, calc(var(--zd-saturation, 1) * 8.20%), calc(64.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_multiselect_box_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
--zdt_multiselect_selectall_text:var(--zdt_cta_primary_text);
--zdt_multiselect_message_text:hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_multiselect_more_text:var(--zdt_cta_primary_text);
--zdt_multiselect_res_title_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
/* ripple effect */
--zdt_rippleeffect_default_border:var(--dot_mirror);
--zdt_rippleeffect_hover_border:var(--zdt_cta_grey_35_border);
--zdt_rippleeffect_hover_bg:var(--zdt_cta_grey_10_bg);
--zdt_rippleeffect_primary_border:var(--zdt_cta_primary_hover_border);
--zdt_rippleeffect_primary_bg:var(--zdt_cta_primary_bg);
--zdt_rippleeffect_primary_active_border:var(--zdt_cta_primary_border);
--zdt_rippleeffect_primary_light_border:var(--zdt_cta_secondary_light_border);
--zdt_rippleeffect_primary_light_bg:var(--zdtm_cta_primary_light_bg_default_inverse_low);
--zdt_rippleeffect_primary_dark_bg:var(--zdt_cta_primary_light_hover_bg);
--zdt_rippleeffect_primaryfilled_bg:var(--zdtm_cta_primary_hover_bg_default);
--zdt_rippleeffect_green_border:hsla(133, calc(var(--zd-saturation, 1) * 48.36%), calc(52.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_rippleeffect_green_bg:hsla(143, calc(var(--zd-saturation, 1) * 44.44%), calc(96.47% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
--zdt_rippleeffect_slate_border:hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
--zdt_rippleeffect_navy_border:var(--zdt_cta_grey_40_border);
--zdt_rippleeffect_danger_border:hsla(0, calc(var(--zd-saturation, 1) * 100.00%), calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
--zdt_rippleeffect_danger_bg:hsla(0, calc(var(--zd-saturation, 1) * 100.00%), calc(70.98% + var(--zdc_default)), calc( 0.05 + var(--zdc_alpha_high)));
--zdt_rippleeffect_secondary_border:var(--zdt_cta_grey_40_border);
--zdt_rippleeffect_secondary_bg:var(--zdt_cta_grey_20_bg);
--zdt_rippleeffect_secondary_active_border:var(--zdt_cta_secondary_light_border);
--zdt_rippleeffect_secondary_active_bg:var(--zdtm_cta_primary_light_bg_default_inverse_low);
/* date time */
--zdt_datetime_default_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
--zdt_datetime_header_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(16.86% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_datetime_header_border:hsla(0, calc(var(--zd-saturation, 1) * 2.33%), calc(8.43% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
--zdt_datetime_datestr_text:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_datetime_datestr_hover_bg:hsla(0, calc(var(--zd-saturation, 1) * 2.33%), calc(8.43% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_datetime_separator_border:hsla(0, calc(var(--zd-saturation, 1) * 2.33%), calc(8.43% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
--zdt_datetime_daystr_text:hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_datetime_invalid_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(34.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_datetime_invalid_hover_text:hsla(0, calc(var(--zd-saturation, 1) * 100.00%), calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
--zdt_datetime_invaliddate_text:hsla(0, calc(var(--zd-saturation, 1) * 71.91%), calc(53.92% + var(--zdc_default_inverse_lower)), calc( 0.3 + var(--zdc_alpha_low)));
--zdt_datetime_selected_bg:var(--zdt_cta_primary_bg);
--zdt_datetime_today_border:var(--zdt_cta_primary_border);
--zdt_datetime_today_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
--zdt_datetime_text:hsla(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_datetime_inactivedate_hover_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(16.86% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
/* year view */
--zdt_yearview_default_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
--zdt_yearview_month_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(16.86% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_yearview_month_hover_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(34.51% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_yearview_currentmonth_bg:var(--zdt_cta_primary_bg);
--zdt_yearview_currentmonth_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
--zdt_yearview_yearbox_border:hsla(0, calc(var(--zd-saturation, 1) * 2.33%), calc(8.43% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
--zdt_yearview_year_hover_text:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_yearview_yeartext_text:hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_yearview_month_text:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
/* date widget */
--zdt_datewidget_input_border:var(--dot_inputLine);
--zdt_datewidget_enabled_border:var(--dot_inputLineHover);
--zdt_datewidget_textboxfocus_border:var(--dot_inputLineFocus);
--zdt_datewidget_placeholder_text:var(--dot_inputPlaceholder);
/* tab */
--zdt_tab_default_border:var(--dot_mirror);
--zdt_tab_alpha_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_tab_alpha_hover_text:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_tab_alpha_hover_bg:var(--zdt_cta_grey_10_bg);
--zdt_tab_alpha_active_text:var(--zdt_cta_primary_text);
--zdt_tab_alpha_active_border:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
--zdt_tab_delta_active_border:var(--zdt_cta_primary_border);
/* tabs */
--zdt_tabs_alpha_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
--zdt_tabs_alpha_border:var(--zdt_cta_grey_15_border);
--zdt_tabs_alpha_box_shadow:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 0.00%, 0.3);
--zdt_tabs_delta_border:var(--zdt_cta_primary_border);
--zdt_tabs_highlight_border:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
/* custom scroll */
--zdt_customscroll_default_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(88.24% + var(--zdc_default_low)), calc( 0.06 + var(--zdc_alpha_low)));
--zdt_customscroll_thump_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(88.24% + var(--zdc_default_inverse_low)), calc( 0.12 + var(--zdc_alpha_low)));
--zdt_customscroll_thump_hover_bg:hsla(217, calc(var(--zd-saturation, 1) * 13.73%), calc(70.00% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
--zdt_customscroll_border:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(88.24% + var(--zdc_lighter_medium)), calc( 0.12 + var(--zdc_alpha_low)));
--zdt_customscroll_thump_dark_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(88.24% + var(--zdc_default_inverse_low)), calc( 0.12 + var(--zdc_alpha_low)));
--zdt_customscroll_thump_dark_hover_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(88.24% + var(--zdc_default_inverse_low)), calc( 0.14 + var(--zdc_alpha_low)));
--zdt_customscroll_dark_border:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(88.24% + var(--zdc_lighter_medium)), calc( 0.12 + var(--zdc_alpha_low)));
--zdt_customscroll_dark_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(88.24% + var(--zdc_default_low)), calc( 0.06 + var(--zdc_alpha_low)));
/* popover */
--zdt_popover_default_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
/* inputFieldLine */
--zdt_inputField_default_border:var(--dot_inputLine);
--zdt_inputField_dark_border:hsla(228, calc(var(--zd-saturation, 1) * 16.20%), calc(35.10% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
--zdt_inputField_error_border:hsla(1, calc(var(--zd-saturation, 1) * 63.86%), calc(48.82% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
--zdt_inputField_hover_border:var(--dot_inputLineHover);
--zdt_inputField_dark_active_border:hsla(229, calc(var(--zd-saturation, 1) * 8.25%), calc(61.96% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
--zdt_inputField_focus_border:var(--dot_inputLineFocus);
/* arrowIcon */
--zdt_arrowicon_default_icon:hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_arrowicon_hover_icon:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
/* colorSelect */
--zdt_colorSelect_placeholder_text:var(--dot_inputPlaceholder);
}[dir=ltr] [data-mode='pureDark']{
--zdt_button_loading_linear_gradient:var(--zd-gradient-saturation, linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%) 0% 100%);
--zdt_button_loading_primary_linear_gradient:var(--zd-gradient-saturation, linear-gradient(0deg, rgba(71, 157, 255, 1) 50%, rgba(71, 157, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(71, 157, 255, 0.9) 0%, rgba(71, 157, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(71, 157, 255, 0.6) 0%, rgba(71, 157, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(71, 157, 255, 0.3) 0%, rgba(71, 157, 255, 0) 100%) 0% 100%);
--zdt_button_loading_danger_linear_gradient:var(--zd-gradient-saturation, linear-gradient(0deg, rgba(255, 107, 107, 1) 50%, rgba(255, 107, 107, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 107, 107, 0.9) 0%, rgba(255, 107, 107, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 107, 107, 0.6) 0%, rgba(255, 107, 107, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 107, 107, 0.3) 0%, rgba(255, 107, 107, 0) 100%) 0% 100%);
--zdt_button_loading_success_linear_gradient:var(--zd-gradient-saturation, linear-gradient(0deg, rgba( 74, 192, 100, 1) 50%, rgba( 74, 192, 100, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba( 74, 192, 100, 0.9) 0%, rgba( 74, 192, 100, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba( 74, 192, 100, 0.6) 0%, rgba( 74, 192, 100, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(74, 192, 100, 0.3) 0%, rgba(74, 192, 100, 0) 100%) 0% 100%);
--zdt_button_loading_secondary_linear_gradient:var(--zd-gradient-saturation, linear-gradient(0deg, rgba( 65, 72, 83, 1) 50%, rgba( 65, 72, 83, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba( 65, 72, 83, 0.9) 0%, rgba( 65, 72, 83, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba( 65, 72, 83, 0.6) 0%, rgba( 65, 72, 83, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(65, 72, 83, 0.3) 0%, rgba(65, 72, 83, 0) 100%) 0% 100%);
--zdt_stencil_primary_gradient_bg:var(--zd-gradient-saturation, linear-gradient(to left, #262626 0, #2d2d2d 33.33%, #2d2d2d 66.66%, #262626 100%));
--zdt_stencil_secondary_gradient_bg:var(--zd-gradient-saturation, linear-gradient(to left, #262626 0, #2d2d2d 33.33%, #2d2d2d 66.66%, #262626 100%));
}[dir=rtl] [data-mode='pureDark']{
--zdt_button_loading_linear_gradient:var(--zd-gradient-saturation, linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.9) 100%) 0% 0%, linear-gradient(-90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%) 100% 0%, linear-gradient(-180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%) 100% 100%, linear-gradient(-360deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%) 0% 100%);
--zdt_button_loading_primary_linear_gradient:var(--zd-gradient-saturation, linear-gradient(0deg, rgba(71, 157, 255, 1) 50%, rgba(71, 157, 255, 0.9) 100%) 0% 0%, linear-gradient(-90deg, rgba(71, 157, 255, 0.9) 0%, rgba(71, 157, 255, 0.6) 100%) 100% 0%, linear-gradient(-180deg, rgba(71, 157, 255, 0.6) 0%, rgba(71, 157, 255, 0.3) 100%) 100% 100%, linear-gradient(-360deg, rgba(71, 157, 255, 0.3) 0%, rgba(71, 157, 255, 0) 100%) 0% 100%);
--zdt_button_loading_danger_linear_gradient:var(--zd-gradient-saturation, linear-gradient(0deg, rgba(255, 107, 107, 1) 50%, rgba(255, 107, 107, 0.9) 100%) 0% 0%, linear-gradient(-90deg, rgba(255, 107, 107, 0.9) 0%, rgba(255, 107, 107, 0.6) 100%) 100% 0%, linear-gradient(-180deg, rgba(255, 107, 107, 0.6) 0%, rgba(255, 107, 107, 0.3) 100%) 100% 100%, linear-gradient(-360deg, rgba(255, 107, 107, 0.3) 0%, rgba(255, 107, 107, 0) 100%) 0% 100%);
--zdt_button_loading_success_linear_gradient:var(--zd-gradient-saturation, linear-gradient(0deg, rgba( 74, 192, 100, 1) 50%, rgba( 74, 192, 100, 0.9) 100%) 0% 0%, linear-gradient(-90deg, rgba( 74, 192, 100, 0.9) 0%, rgba( 74, 192, 100, 0.6) 100%) 100% 0%, linear-gradient(-180deg, rgba( 74, 192, 100, 0.6) 0%, rgba( 74, 192, 100, 0.3) 100%) 100% 100%, linear-gradient(-360deg, rgba(74, 192, 100, 0.3) 0%, rgba(74, 192, 100, 0) 100%) 0% 100%);
--zdt_button_loading_secondary_linear_gradient:var(--zd-gradient-saturation, linear-gradient(0deg, rgba( 65, 72, 83, 1) 50%, rgba( 65, 72, 83, 0.9) 100%) 0% 0%, linear-gradient(-90deg, rgba( 65, 72, 83, 0.9) 0%, rgba( 65, 72, 83, 0.6) 100%) 100% 0%, linear-gradient(-180deg, rgba( 65, 72, 83, 0.6) 0%, rgba( 65, 72, 83, 0.3) 100%) 100% 100%, linear-gradient(-360deg, rgba(65, 72, 83, 0.3) 0%, rgba(65, 72, 83, 0) 100%) 0% 100%);
--zdt_stencil_primary_gradient_bg:var(--zd-gradient-saturation, linear-gradient(to right, #262626 0, #2d2d2d 33.33%, #2d2d2d 66.66%, #262626 100%));
--zdt_stencil_secondary_gradient_bg:var(--zd-gradient-saturation, linear-gradient(to right, #262626 0, #2d2d2d 33.33%, #2d2d2d 66.66%, #262626 100%));
}