@zohodesk/dot/es/ToastMessage/ToastMessage.module.css

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

.container {
  transition: all var(--zd_transition4);
  position: relative;
  max-height: 100% ;
  border-radius: 5px;
  box-shadow: var(--zd_bs_toastmessage_container);
  background-color: var(--zdt_toastmessage_default_bg);
  margin-bottom: var(--zd_size7) ;
}[dir=ltr] .container {
  transform-origin: right center;
}[dir=rtl] .container {
  transform-origin: left center;
}

.closeAnimation {
  max-height: 0 ;
  transition: all var(--zd_transition3) 0.4s;
  margin-bottom: 0 ;
}

.animation {
  composes: modeForward from '~@zohodesk/components/lib/common/animation.module.css';
}

[dir=ltr] .animation {
  animation-duration: var(--zd_transition4);
  -webkit-animation-duration: var(--zd_transition4);
}

[dir=rtl] .animation {
  animation-duration: var(--zd_transition4);
  -webkit-animation-duration: var(--zd_transition4);
}

.leftanimate {
  composes: slideLeft from '~@zohodesk/components/lib/common/animation.module.css';
  composes: animation;
}

.leftnoanimate {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.rightanimate {
  composes: slideRight from '~@zohodesk/components/lib/common/animation.module.css';
  composes: animation;
  composes: closeAnimation;
}

.alertifychild {
  position: relative;
}

.alertifybanner {
  overflow: hidden;
}

[dir=ltr] .alertifybanner {
  border-radius: 5px 0 0 5px;
}

[dir=rtl] .alertifybanner {
  border-radius: 0 5px 5px 0;
}

.alertright {
  width: var(--zd_size105) ;
}

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

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

.popbutton {
  font-size: var(--zd_font_size10) ;
  color: var(--zdt_toastmessage_popbutton_text);
  composes: wbreak textCap from '~@zohodesk/components/lib/common/common.module.css';
  transition: all var(--zd_transition3);
  position: relative;
  cursor: pointer;
}

.mainbutton {
  composes: popbutton;
  font-size: var(--zd_font_size11) ;
}

.sumbitBorder {
  border-bottom: 1px solid var(--zdt_toastmessage_submit_border);
}

.notSolo {
  composes: mainbutton;
  composes: sumbitBorder;
}

.primary {
  color: var(--zdt_toastmessage_primary_text);
}

.danger {
  color: var(--zdt_toastmessage_danger_text);
}

.success {
  color: var(--zdt_toastmessage_success_text);
}

.cancelButton {
  composes: popbutton;
}

.cancelButton:hover {
  color: var(--zdt_toastmessage_cancel_hover_text);
}

.primary:hover,
.alerttab:hover .coverfill.primary {
  color: var(--zdt_toastmessage_primary_hover_text);
}

.primary:hover, .alerttab:hover .coverfill.primary {
  background-color: var(--zdt_toastmessage_primary_hover_bg);
}

.danger:hover,
.alerttab:hover .coverfill.danger {
  color: var(--zdt_toastmessage_primary_hover_text);
}

.danger:hover, .alerttab:hover .coverfill.danger {
  background-color: var(--zdt_toastmessage_danger_hover_bg);
}

.success:hover,
.alerttab:hover .coverfill.success {
  color: var(--zdt_toastmessage_primary_hover_text);
}

.success:hover, .alerttab:hover .coverfill.success {
  background-color: var(--zdt_toastmessage_success_hover_bg);
}

.alertleft {
  padding: var(--zd_size15) var(--zd_size25) ;
}

.alertico {
  min-width: var(--zd_size50) ;
}

.alertsecondary .alertico {
  z-index: -1;
  opacity: 0.1;
  position: absolute;
}

.alertTitle {
  composes: semibold wbreak dotted from '~@zohodesk/components/lib/common/common.module.css';
  font-size: var(--zd_font_size14) ;
  color: var(--zdt_toastmessage_alerttitle_text);
}

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

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

.alertMessage {
  font-size: var(--zd_font_size12) ;
  composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
  line-height: 1.3333;
  color: var(--zdt_toastmessage_alert_text);
  margin-top: var(--zd_size5) ;
}

.buttonText {
  font-size: inherit ;
  line-height: normal;
  text-align: center;
  padding: 0 var(--zd_size7) ;
  cursor: pointer;
}

.closeIcon,
.closeIconPrimary {
  position: absolute;
  top: 0 ;
  z-index: 1;
  color: var(--zdt_toastmessage_closeicon);
}

.closeIcon, .closeIconPrimary {
  padding: var(--zd_size2) ;
  cursor: pointer;
}

[dir=ltr] .closeIcon, [dir=ltr] .closeIconPrimary {
  right: 0 ;
  border-bottom-left-radius: 3px;
}

[dir=rtl] .closeIcon, [dir=rtl] .closeIconPrimary {
  left: 0 ;
  border-bottom-right-radius: 3px;
}

.closeIcon:hover {
  background-color: var(--zdt_toastmessage_closeicon_hover_bg);
}

.alertright:hover .closeIcon i {
  color: var(--zdt_toastmessage_primary_hover_text);
}

.closeIconPrimary:hover i {
  color: var(--zdt_toastmessage_closeicon_hover_text);
}

.dropdown {
  width: var(--zd_size23) ;
  position: relative;
  height: 100% ;
  color: var(--zdt_toastmessage_dropdown_text);
  background: var(--zdt_toastmessage_dropdown_bg);
}

.dropdown>i {
  position: absolute;
  top: 50% ;
}

[dir=ltr] .dropdown>i {
  left: 50% ;
  transform: translate(-50%, -50%);
}

[dir=rtl] .dropdown>i {
  right: 50% ;
  transform: translate(50%, -50%);
}

.dropdown:hover i {
  color: var(--zdt_toastmessage_cancel_hover_text);
}

.message {
  position: relative;
  color: var(--zdt_toastmessage_popbutton_text);
  font-size: var(--zd_font_size11) ;
  composes: dotted textCap from '~@zohodesk/components/lib/common/common.module.css';
  height: var(--zd_size33) ;
  transition: padding var(--zd_transition3), height var(--zd_transition3);
  border-top: 1px solid var(--zdt_toastmessage_message_border);
  cursor: pointer;
  margin: 0 ;
}

[dir=ltr] .message {
  padding: var(--zd_size10) var(--zd_size20) var(--zd_size10) var(--zd_size76) ;
}

[dir=rtl] .message {
  padding: var(--zd_size10) var(--zd_size76) var(--zd_size10) var(--zd_size20) ;
}

.messageOff {
  height: 0 ;
  font-size: 0 ;
  border-width: 0;
}

[dir=ltr] .messageOff {
  padding: 0 var(--zd_size20) 0 var(--zd_size76) ;
}

[dir=rtl] .messageOff {
  padding: 0 var(--zd_size76) 0 var(--zd_size20) ;
}

.message:hover {
  background: var(--zdt_toastmessage_dropdown_bg);
}

/* css:lineheight-validation:ignore */
.fill {
  width: var(--zd_size29) ;
  height: var(--zd_size29) ;
  line-height: var(--zd_size29);
  composes: rounded from '~@zohodesk/components/lib/common/common.module.css';
  text-align: center;
}

.successFill {
  composes: fill;
  color: var(--zdt_toastmessage_primary_hover_text);
  background: var(--zdt_toastmessage_successfill_bg);
}

.dangerFill {
  composes: fill;
  color: var(--zdt_toastmessage_primary_hover_text);
  background: var(--zdt_toastmessage_danger_hover_bg);
}

.dangerShadow {
  color: var(--zdt_toastmessage_danger_text);
  text-shadow: 0 4px 22px var(--zdt_toastmessage_danger_text_shadow);
  margin-top: var(--zd_size5) ;
}

.successPlain {
  color: var(--zdt_toastmessage_successplain_text);
}

.dangerPlain {
  color: var(--zdt_toastmessage_danger_text);
}

.primaryPlain {
  color: var(--zdt_toastmessage_primary_text);
}