@zohodesk/components 1.0.0-temp-164 → 1.0.0-temp-165

package/es/Button/css/Button.module.css

@@ -1,526 +1,526 @@
-.varClass {
-  /* button default variables */
-  /*  Variable:Ignore  */
-  --button_letter_spacing: 0.2px;
-  --button_cursor: pointer;
-  --button_font_size: 13px;
-  --button_text_color: var(--zdt_button_default_text);
-  --button_font_family: var(--zd_regular);
-  --button_text_transform: capitalize;
-  --button_bg_color: var(--zdt_button_default_bg);
-  --button_border_radius: 4px;
-  --button_min_width: 90px;
-  --button_height: auto;
-  --button_border_width: 0;
-  --button_border_style: solid;
-  --button_border_color: var(--zdt_button_default_border);
-  --button_padding: 0;
-  --button_opacity: none;
-  --button_box_shadow: none;
-
-  /* button loading status default variables */
-  --button_loading_bg_color: var(--zdt_button_loading_default_bg);
-  --button_loading_border_radius: 50%;
-
-  /* button success status default variable */
-  --button_success_border_color: var(--zdt_button_success_default_border);
-}
-.native {
-  composes: varClass;
-  /* transition: all var(--zd_transition2) ease 0s; */
-  letter-spacing: var(--button_letter_spacing);
-  opacity: var(--button_opacity);
-  transition-property: background-color, color, border;
-  transition-duration: var(--zd_transition2);
-  transition-timing-function: ease;
-  border: 0;
-  cursor: var(--button_cursor);
-}
-
-.native:disabled {
-  pointer-events: none;
-  --button_cursor: not-allowed;
-  --button_opacity: 0.4;
-}
-
-.container {
-  composes: native;
-  composes: dotted from '../../common/common.module.css';
-  position: relative;
-  font-size: var(--button_font_size);
-  color: var(--button_text_color);
-  font-family: var(--button_font_family);
-  text-transform: var(--button_text_transform);
-  min-width: var(--button_min_width);
-  height: var(--button_height);
-  background-color: var(--button_bg_color);
-  border-radius: var(--button_border_radius);
-  border-width: var(--button_border_width);
-  border-style: var(--button_border_style);
-  border-color: var(--button_border_color);
-  padding: var(--button_padding);
-  box-shadow: var(--button_box_shadow);
-}
-
-.bold {
-  --button_font_family: var(--zd_semibold);
-  composes: ftsmooth from '../../common/common.module.css';
-}
-
-.rounded {
-  --button_border_radius: 50px;
-}
-
-.small {
-  --button_padding: 4px 7px;
-  --button_min_width: 50px;
-  --button_font_size: 10px;
-}
-
-.medium {
-  --button_padding: 6px 15px;
-}
-
-.large {
-  --button_padding: 9px 14px;
-  --button_min_width: 80px;
-  --button_font_size: 12px;
-}
-
-.xlarge {
-  --button_padding: 12px 25px;
-  --button_min_width: 90px;
-  --button_font_size: 13px;
-}
-
-.mediumBtn {
-  --button_height: 42px;
-  --button_min_width: 42px;
-  --button_font_size: 10px;
-  text-align: center;
-}
-
-.smallBtn {
-  --button_height: 22px;
-  --button_min_width: 22px;
-  --button_font_size: 13px;
-  text-align: center;
-}
-
-.smallBtnprimary,
-.smallBtnprimaryfilled,
-.mediumBtnprimary,
-.mediumBtnprimaryfilled {
-  --button_box_shadow: var(--zd_bs_button_primary);
-}
-
-.smallBtndanger,
-.smallBtndangerfilled,
-.mediumBtndanger,
-.mediumBtndangerfilled {
-  --button_box_shadow: var(--zd_bs_button_danger);
-}
-
-.small,
-.medium,
-.large,
-.xlarge,
-.smallBtn,
-.mediumBtn {
-  composes: container;
-}
-
-.plainprimary {
-  --button_text_color: var(--zdt_button_default_text);
-  --button_padding: 5px;
-  --button_min_width: initial;
-  --button_bg_color: var(--zdt_button_default_bg);
-}
-.plainprimary:hover {
-  --button_text_color: var(--zdt_button_plainprimary_hover_text);
-}
-
-.plainsecondary {
-  --button_text_color: var(--zdt_button_secondary_text);
-  --button_padding: 5px;
-  --button_min_width: initial;
-  --button_bg_color: var(--zdt_button_default_bg);
-}
-.plainsecondary:hover {
-  --button_text_color: var(--zdt_button_secondary_hover_text);
-}
-
-.primary,
-.primaryfilled,
-.danger,
-.dangerfilled,
-.secondary,
-.secondaryfilled,
-.successfilled,
-.tertiaryfilled {
-  --button_border_width: 1px;
-}
-.primary:hover {
-  --button_border_color: var(--zdt_button_primary_hover_border);
-  --button_text_color: var(--zdt_button_primary_hover_text);
-}
-
-.primaryfilled {
-  --button_border_color: var(--zdt_button_primaryfill_border);
-  --button_bg_color: var(--zdt_button_primaryfill_bg);
-  --button_text_color: var(--zdt_button_primaryfill_text);
-}
-.primaryfilled:hover {
-  --button_bg_color: var(--zdt_button_primaryfill_hover_bg);
-}
-
-.danger {
-  --button_border_color: var(--zdt_button_danger_border);
-  --button_bg_color: var(--zdt_button_default_bg);
-  --button_text_color: var(--zdt_button_danger_text);
-}
-.danger:hover {
-  --button_border_color: var(--zdt_button_danger_hover_border);
-  --button_text_color: var(--zdt_button_danger_hover_text);
-}
-
-.dangerfilled {
-  --button_border_color: var(--zdt_button_primaryfill_border);
-  --button_bg_color: var(--zdt_button_dangerfill_bg);
-  --button_text_color: var(--zdt_button_dangerfill_text);
-}
-.dangerfilled:hover {
-  --button_bg_color: var(--zdt_button_dangerfill_hover_bg);
-}
-
-.secondary {
-  --button_border_color: var(--zdt_button_secondary_border);
-  --button_bg_color: var(--zdt_button_default_bg);
-  --button_text_color: var(--zdt_button_secondary_text);
-}
-.secondary:hover {
-  --button_border_color: var(--zdt_button_secondary_hover_border);
-  --button_text_color: var(--zdt_button_secondary_hover_text);
-}
-
-.secondaryfilled {
-  --button_border_color: var(--zdt_button_primaryfill_border);
-  --button_bg_color: var(--zdt_button_secondaryfill_bg);
-  --button_text_color: var(--zdt_button_secondary_text);
-}
-.secondaryfilled:hover {
-  --button_text_color: var(--zdt_button_secondary_hover_text);
-}
-
-.successfilled {
-  --button_border_color: var(--zdt_button_successfill_border);
-  --button_bg_color: var(--zdt_button_successfill_bg);
-  --button_text_color: var(--zdt_button_dangerfill_text);
-}
-.successfilled:hover {
-  --button_border_color: var(--zdt_button_successfill_hover_border);
-  --button_bg_color: var(--zdt_button_successfill_hover_bg);
-}
-
-.tertiaryfilled {
-  --button_border_color: var(--zdt_button_primaryfill_border);
-  --button_bg_color: var(--zdt_button_tertiaryfill_bg);
-  --button_text_color: var(--zdt_button_dangerfill_text);
-}
-.tertiaryfilled:hover {
-  --button_bg_color: var(--zdt_button_tertiaryfill_hover_bg);
-}
-
-.overlay {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  background: inherit;
-  border-radius: inherit;
-}
-
-[dir=ltr] .overlay {
-  left: 0;
-  right: 0;
-}
-
-[dir=rtl] .overlay {
-  right: 0;
-  left: 0;
-}
-
-.loading {
-  position: absolute;
-  top: 50%;
-  width: 20px;
-  height: 20px;
-}
-
-[dir=ltr] .loading {
-  left: 50%;
-  transform: translate(-50%, -50%);
-  -moz-transform: translate(-50%, -50%);
-  -webkit-transform: translate(-50%, -50%);
-}
-
-[dir=rtl] .loading {
-  right: 50%;
-  transform: translate(50%, -50%);
-  -moz-transform: translate(50%, -50%);
-  -webkit-transform: translate(50%, -50%);
-}
-
-.loadingelement {
-  height: inherit;
-  width: inherit;
-  position: relative;
-  display: inline-block;
-  border-radius: 50%;
-  transform-origin: 50%;
-}
-
-[dir=ltr] .loadingelement {
-  animation:  crlrotate-ltr var(--zd_no_transition8) linear infinite;
-  -moz-animation:  crlrotate-ltr var(--zd_no_transition8) linear infinite;
-  -webkit-animation:  crlrotate-ltr var(--zd_no_transition8) linear infinite;
-}
-
-[dir=rtl] .loadingelement {
-  animation:  crlrotate-rtl var(--zd_no_transition8) linear infinite;
-  -moz-animation:  crlrotate-rtl var(--zd_no_transition8) linear infinite;
-  -webkit-animation:  crlrotate-rtl var(--zd_no_transition8) linear infinite;
-}
-
-.loadingelement:before,
-.loadingelement:after {
-  content: '';
-  position: absolute;
-}
-
-.loadingelement:before, .loadingelement:after {
-  background-color: var(--button_loading_bg_color);
-  border-radius: var(--button_loading_border_radius);
-}
-
-.smallloading,
-.mediumloading {
-  height: 10px;
-  width: 10px;
-}
-
-.loadingelement:after {
-  top: 1px;
-  bottom: 1px;
-}
-
-[dir=ltr] .loadingelement:after {
-  left: 1px;
-  right: 1px;
-}
-
-[dir=rtl] .loadingelement:after {
-  right: 1px;
-  left: 1px;
-}
-
-.loadingelement {
-  --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
-}
-.primaryelement {
-  --button_loading_bg_color: var(--zdt_button_loading_default_bg);
-}
-.primaryfilledelement {
-  --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
-}
-.dangerelement {
-  --button_loading_bg_color: var(--zdt_button_loading_default_bg);
-}
-.dangerfilledelement {
-  --button_loading_bg_color: var(--zdt_button_dangerfill_bg);
-}
-.loadingelement:after,
-.primaryelement:after,
-.primaryfilledelement:after,
-.dangerelement:after,
-.dangerfilledelement:after {
-  --button_loading_bg_color: inherit;
-}
-
-.loadingelement:before {
-  top: -1px;
-  bottom: -1px;
-  background: var(--zdt_button_loading_linear_gradient);
-  background-repeat: no-repeat;
-  background-size: 50% 50%;
-}
-
-[dir=ltr] .loadingelement:before {
-  left: -1px;
-  right: -1px;
-}
-
-[dir=rtl] .loadingelement:before {
-  right: -1px;
-  left: -1px;
-}
-
-.primaryelement:before {
-  --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
-  --zdt_button_loading_linear_gradient:var(--zdt_button_loading_primary_linear_gradient);
-  transform: rotateX(180deg);
-}
-
-.dangerelement:before {
-  --button_loading_bg_color: var(--zdt_button_dangerfill_bg);
-  --zdt_button_loading_linear_gradient:var(--zdt_button_loading_danger_linear_gradient);
-  transform: rotateX(180deg);
-}
-
-.primarysuccess {
-  --button_success_border_color: var(--zdt_button_default_border);
-}
-
-.primaryfilled .successelement {
-  --button_success_border_color: var(--zdt_button_tick_primary_border);
-}
-
-.dangersuccess {
-  --button_success_border_color: var(--zdt_button_danger_border);
-}
-
-@keyframes crlrotate-ltr {
-  0% {
-    transform: scaleX(-1) rotate(0deg);
-  }
-
-  100% {
-    transform: scaleX(-1) rotate(-360deg);
-  }
-}
-
-@keyframes crlrotate-rtl {
-  0% {
-    transform: scaleX(-1) rotate(0deg);
-  }
-
-  100% {
-    transform: scaleX(-1) rotate(360deg);
-  }
-}
-
-@-moz-keyframes crlrotate-ltr {
-  0% {
-    -moz-transform: scaleX(-1) rotate(0deg);
-  }
-
-  100% {
-    -moz-transform: scaleX(-1) rotate(-360deg);
-  }
-}
-
-@-moz-keyframes crlrotate-rtl {
-  0% {
-    -moz-transform: scaleX(-1) rotate(0deg);
-  }
-
-  100% {
-    -moz-transform: scaleX(-1) rotate(360deg);
-  }
-}
-
-@-webkit-keyframes crlrotate-ltr {
-  0% {
-    -webkit-transform: scaleX(-1) rotate(0deg);
-  }
-
-  100% {
-    -webkit-transform: scaleX(-1) rotate(-360deg);
-  }
-}
-
-@-webkit-keyframes crlrotate-rtl {
-  0% {
-    -webkit-transform: scaleX(-1) rotate(0deg);
-  }
-
-  100% {
-    -webkit-transform: scaleX(-1) rotate(360deg);
-  }
-}
-.success {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  -moz-transform: translate(-50%, -50%);
-  -webkit-transform: translate(-50%, -50%);
-  z-index: 3;
-}
-
-.successelement {
-  height: 15px;
-  position: relative;
-  top: -2px;
-  width: 6px;
-  transform: scaleX(-1) rotate(135deg);
-  -moz-transform: scaleX(-1) rotate(135deg);
-  -webkit-transform: scaleX(-1) rotate(135deg);
-  transform-origin: center;
-  border-width: 2px 2px 0 0;
-  border-style: solid;
-  border-color: var(--button_success_border_color);
-  animation: tick var(--zd_no_transition3) ease 0s forwards;
-}
-
-@keyframes tick {
-  0% {
-    height: 0;
-    width: 0;
-  }
-
-  50% {
-    height: 0;
-    width: 6px;
-  }
-
-  100% {
-    height: 15px;
-    width: 6px;
-  }
-}
-
-@-moz-keyframes tick {
-  0% {
-    height: 0;
-    width: 0;
-  }
-
-  50% {
-    height: 0;
-    width: 6px;
-  }
-
-  100% {
-    height: 15px;
-    width: 6px;
-  }
-}
-
-@-webkit-keyframes tick {
-  0% {
-    height: 0;
-    width: 0;
-  }
-
-  50% {
-    height: 0;
-    width: 6px;
-  }
-
-  100% {
-    height: 15px;
-    width: 6px;
-  }
-}
-
+.varClass {
+  /* button default variables */
+  /*  Variable:Ignore  */
+  --button_letter_spacing: 0.2px;
+  --button_cursor: pointer;
+  --button_font_size: var(--zd_font_size13);
+  --button_text_color: var(--zdt_button_default_text);
+  --button_font_family: var(--zd_regular);
+  --button_text_transform: capitalize;
+  --button_bg_color: var(--zdt_button_default_bg);
+  --button_border_radius: 4px;
+  --button_min_width: var(--zd_size90);
+  --button_height: auto;
+  --button_border_width: 0;
+  --button_border_style: solid;
+  --button_border_color: var(--zdt_button_default_border);
+  --button_padding: 0;
+  --button_opacity: none;
+  --button_box_shadow: none;
+
+  /* button loading status default variables */
+  --button_loading_bg_color: var(--zdt_button_loading_default_bg);
+  --button_loading_border_radius: 50%;
+
+  /* button success status default variable */
+  --button_success_border_color: var(--zdt_button_success_default_border);
+}
+.native {
+  composes: varClass;
+  /* transition: all var(--zd_transition2) ease 0s; */
+  letter-spacing: var(--button_letter_spacing);
+  opacity: var(--button_opacity);
+  transition-property: background-color, color, border;
+  transition-duration: var(--zd_transition2);
+  transition-timing-function: ease;
+  border: 0;
+  cursor: var(--button_cursor);
+}
+
+.native:disabled {
+  pointer-events: none;
+  --button_cursor: not-allowed;
+  --button_opacity: 0.4;
+}
+
+.container {
+  composes: native;
+  composes: dotted from '../../common/common.module.css';
+  position: relative;
+  font-size: var(--button_font_size);
+  color: var(--button_text_color);
+  font-family: var(--button_font_family);
+  text-transform: var(--button_text_transform);
+  min-width: var(--button_min_width);
+  height: var(--button_height);
+  background-color: var(--button_bg_color);
+  border-radius: var(--button_border_radius);
+  border-width: var(--button_border_width);
+  border-style: var(--button_border_style);
+  border-color: var(--button_border_color);
+  padding: var(--button_padding);
+  box-shadow: var(--button_box_shadow);
+}
+
+.bold {
+  --button_font_family: var(--zd_semibold);
+  composes: ftsmooth from '../../common/common.module.css';
+}
+
+.rounded {
+  --button_border_radius: 50px;
+}
+
+.small {
+  --button_padding: var(--zd_size4) var(--zd_size7);
+  --button_min_width: var(--zd_size50);
+  --button_font_size: var(--zd_font_size10);
+}
+
+.medium {
+  --button_padding: var(--zd_size6) var(--zd_size15);
+}
+
+.large {
+  --button_padding: var(--zd_size9) var(--zd_size14);
+  --button_min_width: var(--zd_size80);
+  --button_font_size: var(--zd_font_size12);
+}
+
+.xlarge {
+  --button_padding: var(--zd_size12) var(--zd_size25);
+  --button_min_width: var(--zd_size90);
+  --button_font_size: var(--zd_font_size13);
+}
+
+.mediumBtn {
+  --button_height: var(--zd_size42);
+  --button_min_width: var(--zd_size42);
+  --button_font_size: var(--zd_font_size10);
+  text-align: center;
+}
+
+.smallBtn {
+  --button_height: var(--zd_size22);
+  --button_min_width: var(--zd_size22);
+  --button_font_size: var(--zd_font_size13);
+  text-align: center;
+}
+
+.smallBtnprimary,
+.smallBtnprimaryfilled,
+.mediumBtnprimary,
+.mediumBtnprimaryfilled {
+  --button_box_shadow: var(--zd_bs_button_primary);
+}
+
+.smallBtndanger,
+.smallBtndangerfilled,
+.mediumBtndanger,
+.mediumBtndangerfilled {
+  --button_box_shadow: var(--zd_bs_button_danger);
+}
+
+.small,
+.medium,
+.large,
+.xlarge,
+.smallBtn,
+.mediumBtn {
+  composes: container;
+}
+
+.plainprimary {
+  --button_text_color: var(--zdt_button_default_text);
+  --button_padding: var(--zd_size5);
+  --button_min_width: initial;
+  --button_bg_color: var(--zdt_button_default_bg);
+}
+.plainprimary:hover {
+  --button_text_color: var(--zdt_button_plainprimary_hover_text);
+}
+
+.plainsecondary {
+  --button_text_color: var(--zdt_button_secondary_text);
+  --button_padding: var(--zd_size5);
+  --button_min_width: initial;
+  --button_bg_color: var(--zdt_button_default_bg);
+}
+.plainsecondary:hover {
+  --button_text_color: var(--zdt_button_secondary_hover_text);
+}
+
+.primary,
+.primaryfilled,
+.danger,
+.dangerfilled,
+.secondary,
+.secondaryfilled,
+.successfilled,
+.tertiaryfilled {
+  --button_border_width: 1px;
+}
+.primary:hover {
+  --button_border_color: var(--zdt_button_primary_hover_border);
+  --button_text_color: var(--zdt_button_primary_hover_text);
+}
+
+.primaryfilled {
+  --button_border_color: var(--zdt_button_primaryfill_border);
+  --button_bg_color: var(--zdt_button_primaryfill_bg);
+  --button_text_color: var(--zdt_button_primaryfill_text);
+}
+.primaryfilled:hover {
+  --button_bg_color: var(--zdt_button_primaryfill_hover_bg);
+}
+
+.danger {
+  --button_border_color: var(--zdt_button_danger_border);
+  --button_bg_color: var(--zdt_button_default_bg);
+  --button_text_color: var(--zdt_button_danger_text);
+}
+.danger:hover {
+  --button_border_color: var(--zdt_button_danger_hover_border);
+  --button_text_color: var(--zdt_button_danger_hover_text);
+}
+
+.dangerfilled {
+  --button_border_color: var(--zdt_button_primaryfill_border);
+  --button_bg_color: var(--zdt_button_dangerfill_bg);
+  --button_text_color: var(--zdt_button_dangerfill_text);
+}
+.dangerfilled:hover {
+  --button_bg_color: var(--zdt_button_dangerfill_hover_bg);
+}
+
+.secondary {
+  --button_border_color: var(--zdt_button_secondary_border);
+  --button_bg_color: var(--zdt_button_default_bg);
+  --button_text_color: var(--zdt_button_secondary_text);
+}
+.secondary:hover {
+  --button_border_color: var(--zdt_button_secondary_hover_border);
+  --button_text_color: var(--zdt_button_secondary_hover_text);
+}
+
+.secondaryfilled {
+  --button_border_color: var(--zdt_button_primaryfill_border);
+  --button_bg_color: var(--zdt_button_secondaryfill_bg);
+  --button_text_color: var(--zdt_button_secondary_text);
+}
+.secondaryfilled:hover {
+  --button_text_color: var(--zdt_button_secondary_hover_text);
+}
+
+.successfilled {
+  --button_border_color: var(--zdt_button_successfill_border);
+  --button_bg_color: var(--zdt_button_successfill_bg);
+  --button_text_color: var(--zdt_button_dangerfill_text);
+}
+.successfilled:hover {
+  --button_border_color: var(--zdt_button_successfill_hover_border);
+  --button_bg_color: var(--zdt_button_successfill_hover_bg);
+}
+
+.tertiaryfilled {
+  --button_border_color: var(--zdt_button_primaryfill_border);
+  --button_bg_color: var(--zdt_button_tertiaryfill_bg);
+  --button_text_color: var(--zdt_button_dangerfill_text);
+}
+.tertiaryfilled:hover {
+  --button_bg_color: var(--zdt_button_tertiaryfill_hover_bg);
+}
+
+.overlay {
+  position: absolute;
+  top: 0 ;
+  bottom: 0 ;
+  background: inherit;
+  border-radius: inherit;
+}
+
+[dir=ltr] .overlay {
+  left: 0 ;
+  right: 0 ;
+}
+
+[dir=rtl] .overlay {
+  right: 0 ;
+  left: 0 ;
+}
+
+.loading {
+  position: absolute;
+  top: 50% ;
+  width: var(--zd_size20) ;
+  height: var(--zd_size20) ;
+}
+
+[dir=ltr] .loading {
+  left: 50% ;
+  transform: translate(-50%, -50%);
+  -moz-transform: translate(-50%, -50%);
+  -webkit-transform: translate(-50%, -50%);
+}
+
+[dir=rtl] .loading {
+  right: 50% ;
+  transform: translate(50%, -50%);
+  -moz-transform: translate(50%, -50%);
+  -webkit-transform: translate(50%, -50%);
+}
+
+.loadingelement {
+  height: inherit ;
+  width: inherit ;
+  position: relative;
+  display: inline-block;
+  border-radius: 50%;
+  transform-origin: 50%;
+}
+
+[dir=ltr] .loadingelement {
+  animation:  crlrotate-ltr var(--zd_no_transition8) linear infinite;
+  -moz-animation:  crlrotate-ltr var(--zd_no_transition8) linear infinite;
+  -webkit-animation:  crlrotate-ltr var(--zd_no_transition8) linear infinite;
+}
+
+[dir=rtl] .loadingelement {
+  animation:  crlrotate-rtl var(--zd_no_transition8) linear infinite;
+  -moz-animation:  crlrotate-rtl var(--zd_no_transition8) linear infinite;
+  -webkit-animation:  crlrotate-rtl var(--zd_no_transition8) linear infinite;
+}
+
+.loadingelement:before,
+.loadingelement:after {
+  content: '';
+  position: absolute;
+}
+
+.loadingelement:before, .loadingelement:after {
+  background-color: var(--button_loading_bg_color);
+  border-radius: var(--button_loading_border_radius);
+}
+
+.smallloading,
+.mediumloading {
+  height: var(--zd_size10) ;
+  width: var(--zd_size10) ;
+}
+
+.loadingelement:after {
+  top: var(--zd_size1) ;
+  bottom: var(--zd_size1) ;
+}
+
+[dir=ltr] .loadingelement:after {
+  left: var(--zd_size1) ;
+  right: var(--zd_size1) ;
+}
+
+[dir=rtl] .loadingelement:after {
+  right: var(--zd_size1) ;
+  left: var(--zd_size1) ;
+}
+
+.loadingelement {
+  --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
+}
+.primaryelement {
+  --button_loading_bg_color: var(--zdt_button_loading_default_bg);
+}
+.primaryfilledelement {
+  --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
+}
+.dangerelement {
+  --button_loading_bg_color: var(--zdt_button_loading_default_bg);
+}
+.dangerfilledelement {
+  --button_loading_bg_color: var(--zdt_button_dangerfill_bg);
+}
+.loadingelement:after,
+.primaryelement:after,
+.primaryfilledelement:after,
+.dangerelement:after,
+.dangerfilledelement:after {
+  --button_loading_bg_color: inherit;
+}
+
+.loadingelement:before {
+  top: calc( var(--zd_size1) * -1 ) ;
+  bottom: calc( var(--zd_size1) * -1 ) ;
+  background: var(--zdt_button_loading_linear_gradient);
+  background-repeat: no-repeat;
+  background-size: 50% 50%;
+}
+
+[dir=ltr] .loadingelement:before {
+  left: calc( var(--zd_size1) * -1 ) ;
+  right: calc( var(--zd_size1) * -1 ) ;
+}
+
+[dir=rtl] .loadingelement:before {
+  right: calc( var(--zd_size1) * -1 ) ;
+  left: calc( var(--zd_size1) * -1 ) ;
+}
+
+.primaryelement:before {
+  --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
+  --zdt_button_loading_linear_gradient:var(--zdt_button_loading_primary_linear_gradient);
+  transform: rotateX(180deg);
+}
+
+.dangerelement:before {
+  --button_loading_bg_color: var(--zdt_button_dangerfill_bg);
+  --zdt_button_loading_linear_gradient:var(--zdt_button_loading_danger_linear_gradient);
+  transform: rotateX(180deg);
+}
+
+.primarysuccess {
+  --button_success_border_color: var(--zdt_button_default_border);
+}
+
+.primaryfilled .successelement {
+  --button_success_border_color: var(--zdt_button_tick_primary_border);
+}
+
+.dangersuccess {
+  --button_success_border_color: var(--zdt_button_danger_border);
+}
+
+@keyframes crlrotate-ltr {
+  0% {
+    transform: scaleX(-1) rotate(0deg);
+  }
+
+  100% {
+    transform: scaleX(-1) rotate(-360deg);
+  }
+}
+
+@keyframes crlrotate-rtl {
+  0% {
+    transform: scaleX(-1) rotate(0deg);
+  }
+
+  100% {
+    transform: scaleX(-1) rotate(360deg);
+  }
+}
+
+@-moz-keyframes crlrotate-ltr {
+  0% {
+    -moz-transform: scaleX(-1) rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: scaleX(-1) rotate(-360deg);
+  }
+}
+
+@-moz-keyframes crlrotate-rtl {
+  0% {
+    -moz-transform: scaleX(-1) rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: scaleX(-1) rotate(360deg);
+  }
+}
+
+@-webkit-keyframes crlrotate-ltr {
+  0% {
+    -webkit-transform: scaleX(-1) rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: scaleX(-1) rotate(-360deg);
+  }
+}
+
+@-webkit-keyframes crlrotate-rtl {
+  0% {
+    -webkit-transform: scaleX(-1) rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: scaleX(-1) rotate(360deg);
+  }
+}
+.success {
+  position: absolute;
+  top: 50% ;
+  left: 50% ;
+  transform: translate(-50%, -50%);
+  -moz-transform: translate(-50%, -50%);
+  -webkit-transform: translate(-50%, -50%);
+  z-index: 3;
+}
+
+.successelement {
+  height: var(--zd_size15) ;
+  position: relative;
+  top: calc( var(--zd_size2) * -1 ) ;
+  width: var(--zd_size6) ;
+  transform: scaleX(-1) rotate(135deg);
+  -moz-transform: scaleX(-1) rotate(135deg);
+  -webkit-transform: scaleX(-1) rotate(135deg);
+  transform-origin: center;
+  border-width: 2px 2px 0 0;
+  border-style: solid;
+  border-color: var(--button_success_border_color);
+  animation: tick var(--zd_no_transition3) ease 0s forwards;
+}
+
+@keyframes tick {
+  0% {
+    height: 0 ;
+    width: 0 ;
+  }
+
+  50% {
+    height: 0 ;
+    width: var(--zd_size6) ;
+  }
+
+  100% {
+    height: var(--zd_size15) ;
+    width: var(--zd_size6) ;
+  }
+}
+
+@-moz-keyframes tick {
+  0% {
+    height: 0 ;
+    width: 0 ;
+  }
+
+  50% {
+    height: 0 ;
+    width: var(--zd_size6) ;
+  }
+
+  100% {
+    height: var(--zd_size15) ;
+    width: var(--zd_size6) ;
+  }
+}
+
+@-webkit-keyframes tick {
+  0% {
+    height: 0 ;
+    width: 0 ;
+  }
+
+  50% {
+    height: 0 ;
+    width: var(--zd_size6) ;
+  }
+
+  100% {
+    height: var(--zd_size15) ;
+    width: var(--zd_size6) ;
+  }
+}
+
 .loader{color:var(--dot_mirror)}