@zohodesk/dot/lib/ActionButton/ActionButton.module.css

In this Library, we Provide Some Basic Components to Build Your Application

.varClass {
  --buttonBg: var(--zdt_actionButton_primaryFilled_bg);
  --buttonBorder: var(--zdt_actionButton_primary_border);
  --buttonSeparatorBorder: var(--zdt_actionButton_separator_border);
}

.container {
  composes: varClass;
}

.container:hover {
  --buttonSeparatorBorder: var(--zdt_actionButton_separator_hover_border);
}

.primaryFilledBox {
  --buttonText: var(--zdt_actionButton_primaryFilled_text);
}

.primaryFilledBtn,
.primaryFilledArw {
  /* css:theme-validation:ignore */
}

.primaryFilledBtn, .primaryFilledArw {
  background-color: var(--buttonBg);
}

.primaryBox {
  --buttonText: var(--zdt_actionButton_primary_text);
}

.primaryBtn,
.primaryArw {
  /* css:theme-validation:ignore */
}

.primaryBtn, .primaryArw {
  border: 1px solid var(--buttonBorder);
}

[dir=ltr] .primaryBtn {
  border-right: none;
}

[dir=rtl] .primaryBtn {
  border-left: none;
}

.contentBox,
.arrowWrapper {
  transition: width var(--zd_transition3), padding var(--zd_transition3), background-color var(--zd_transition2), border-color var(--zd_transition2);
}

.contentBox, .arrowWrapper {
  margin: 0 ;
}

.clickable {
  cursor: pointer;
}

[dir=ltr] .contentBoxBdr {
  border-radius: var(--zd_size4) 0 0 var(--zd_size4);
}

[dir=rtl] .contentBoxBdr {
  border-radius: 0 var(--zd_size4) var(--zd_size4) 0;
}

.contentBoxBdrRds {
  border-radius: var(--zd_size4);
}

.small {
  height: var(--zd_size28) ;
}

.medium,
.large {
  height: var(--zd_size30) ;
}

.medium {
  min-width: var(--zd_size115) ;
}

.large {
  min-width: var(--zd_size135) ;
}

.small_btnBox {
  padding: 0 var(--zd_size8) ;
}

.medium_btnBox, .large_btnBox {
  padding: 0 var(--zd_size10) ;
}

.txt {
  font-size: var(--zd_font_size13) ;
  font-family: var(--zd_semibold);
  text-transform: capitalize;
}

.subTxt {
  font-size: var(--zd_font_size10) ;
}

.contentwrapper,
.txt,
.subTxt {
  max-width: 100% ;
}

.txt,
.subTxt {
  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
  /* css:theme-validation:ignore */
  color: var(--buttonText);
}

.arrowWrapper {
  position: relative;
  composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
  cursor: pointer;
}

[dir=ltr] .arrowWrapper {
  border-radius: 0 var(--zd_size4) var(--zd_size4) 0;
}

[dir=rtl] .arrowWrapper {
  border-radius: var(--zd_size4) 0 0 var(--zd_size4);
}

.primaryFilledArw {
  /* css:theme-validation:ignore */
}

[dir=ltr] .primaryFilledArw {
  border-left: 1px solid var(--buttonSeparatorBorder);
}

[dir=rtl] .primaryFilledArw {
  border-right: 1px solid var(--buttonSeparatorBorder);
}

.small_arrowBox {
  width: var(--zd_size20) ;
}

.medium_arrowBox {
  width: var(--zd_size26) ;
}

.primaryFilledArw:hover,
.primaryFilledArw.arrowActive,
.clickable.primaryFilledBtn:hover,
.wholeDiv.primaryFilledBox:hover {
  --buttonBg: var(--zdt_actionButton_primaryFilled_hover_bg);
}

.primaryArw:hover,
.primaryArw.arrowActive,
.clickable.primaryBtn:hover,
.wholeDiv.primaryBox:hover {
  --buttonBorder: var(--zdt_actionButton_primary_hover_border);
  --buttonText: var(--zdt_actionButton_primary_hover_text);
}

.btn {
  height: 100% ;
  width: 100% ;
}

.popupWrapper {
  padding: var(--zd_size10) 0 ;
  margin: var(--zd_size5) 0 ;
}

.arrow,
.iconClr {
  /* css:theme-validation:ignore */
  color: var(--buttonText);
}

[dir=ltr] .iconMrgn {
  margin-right: var(--zd_size6) ;
}

[dir=rtl] .iconMrgn {
  margin-left: var(--zd_size6) ;
}