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

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

.message {
  position: absolute;
  top: 0 ;
  z-index: 1000;
  /*Hook for editor alert*/
  pointer-events: none;
  text-align: center;
}[dir=ltr] .message {
  right: 0 ;
  left: 0 ;
}[dir=rtl] .message {
  left: 0 ;
  right: 0 ;
}

.container {
  position: relative;
  display: inline-block;
  pointer-events: initial;
  box-shadow: var(--zd_bs_message_container);
  border-radius: 0 0 5px 5px;
  background: var(--zdt_message_default_bg);
}

[dir=ltr] .container {
  padding: var(--zd_size13) var(--zd_size10) var(--zd_size13) var(--zd_size50) ;
}

[dir=rtl] .container {
  padding: var(--zd_size13) var(--zd_size50) var(--zd_size13) var(--zd_size10) ;
}

.text {
  max-width: var(--zd_size480) ;
  display: inline-block;
  word-break: break-word;
  font-size: var(--zd_font_size14) ;
  vertical-align: middle;
}

[dir=ltr] .text {
  text-align: left;
}

[dir=rtl] .text {
  text-align: right;
}

.icon {
  position: absolute;
  top: 0 ;
  width: var(--zd_size40) ;
  display: inline-block;
  height: 100% ;
}

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

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

.success {
  composes: icon;
  background: var(--zdt_message_success_bg);
}

.alert {
  composes: icon;
  background: var(--zdt_message_alert_bg);
}

.info {
  composes: icon;
  background: var(--zdt_message_info_bg);
}

.tickIcn {
  color: var(--zdt_message_tickicon);
  font-size: var(--zd_font_size16) ;
  position: absolute;
  composes: middleBoth from '~@zohodesk/components/es/common/common.module.css';
}

.close {
  color: var(--zdt_message_close_text);
  font-size: var(--zd_font_size16) ;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

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

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