@zohodesk/components/lib/DropBox/css/DropBox.module.css

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

.varClass {
  /* dropbox default variables */
  --dropbox_bg_color: var(--zdt_dropbox_default_bg);
  --dropbox_border_radius: 0;
  --dropbox_padding: 0;
  --dropbox_box_shadow: var(--zd_bs_dropbox_bottom);

  /* dropbox arrow default variables */
  --dropbox_arrow_box_shadow_color: var(--zdt_dropbox_arrow_shadow);

  /* dropbox responsive default variables */
  --dropbox_mob_bg_color: var(--zdt_dropbox_mob_bg);
  --dropbox_mob_close_bg_color: var(--zdt_dropbox_mob_close_bg);
}

.activateInDelay {
  composes: modeForward from '../../common/animation.module.css';
  pointer-events: none;
}

[dir=ltr] .activateInDelay {
  animation-duration: var(--zd_transition1);
  animation-delay: var(--zd_transition2);
  animation-name: activateInDelay;
}

[dir=rtl] .activateInDelay {
  animation-duration: var(--zd_transition1);
  animation-delay: var(--zd_transition2);
  animation-name: activateInDelay;
}

.freezeLayer {
  position: absolute;
  top: 0 ;
  bottom: 0 ;
  composes: activateInDelay;
}

[dir=ltr] .freezeLayer {
  left: 0 ;
  right: 0 ;
}

[dir=rtl] .freezeLayer {
  right: 0 ;
  left: 0 ;
}

.freeze {
  composes: varClass;
  background: var(--dropbox_mob_bg_color);
}

@keyframes activateInDelay {
  100% {
    pointer-events: initial;
  }
}