@zohodesk/components/es/DropBox/DropBoxElement/css/DropBoxElement.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

.main {
    z-index: 3;
    composes: varClass from '../../css/DropBox.module.css';
}

.container {
    position: absolute;
}

.fixedContainer {
    position: fixed;
}

.subContainer {
    position: relative;
    border-radius: var(--dropbox_border_radius);
    padding: var(--dropbox_padding);
    box-shadow: var(--dropbox_box_shadow);
}

.defaultPalette,
.darkPalette {
    /*css:theme-validation:ignore*/
}

.defaultPalette, .darkPalette {
    background-color: var(--dropbox_bg_color);
}

.radius {
    --dropbox_border_radius: 3px;
}

.mobRadius {
    --dropbox_border_radius: 30px 30px 0 0;
    --dropbox_padding: var(--zd_size10) 0 0 0;
}

/* sizes */
.mini {
    width: var(--zd_size140) ;
}

.xmini {
    width: var(--zd_size160) ;
}

.xsmall {
    width: var(--zd_size180) ;
}

.small {
    width: var(--zd_size200) ;
}

.medium {
    width: var(--zd_size220) ;
}

.large {
    width: var(--zd_size260) ;
}

.mlarge {
    width: var(--zd_size280) ;
}

.xlarge {
    width: var(--zd_size304) ;
}

.xxlarge {
    width: var(--zd_size364) ;
}

.default {
    width: 100% ;
}

/* shadow */
[data-box-direction="top"]>.shadow {
    --dropbox_box_shadow: var(--zd_bs_dropbox_top);
}

[data-box-direction="left"]>.shadow {
    --dropbox_box_shadow: var(--zd_bs_dropbox_left);
}

[data-box-direction="right"]>.shadow {
    --dropbox_box_shadow: var(--zd_bs_dropbox_right);
}

[data-box-direction="bottom"]>.shadow {
    --dropbox_box_shadow: var(--zd_bs_dropbox_bottom);
}

.defaultShadow {
    box-shadow: var(--zd_bs_dropbox_default);
}

/* box direction styles */
.topStart {
    bottom: 100% ;
    right: 0 ;
}

.topEnd {
    bottom: 100% ;
    left: 0 ;
}

.topMid {
    bottom: 100% ;
    left: 50% ;
    transform: translateX(-50%);
}

.bottomStart {
    top: 100% ;
    right: 0 ;
}

.bottomEnd {
    top: 100% ;
    left: 0 ;
}

.bottomMid {
    top: 100% ;
    left: 50% ;
    transform: translateX(-50%);
}

.rightStart {
    left: 100% ;
    bottom: 0 ;
}

.rightEnd {
    left: 100% ;
    top: 0 ;
}

.rightMid {
    left: 100% ;
    top: 50% ;
    transform: translateY(-50%);
}

.leftStart {
    right: 100% ;
    bottom: 0 ;
}

.leftEnd {
    right: 100% ;
    top: 0 ;
}

.leftMid {
    right: 100% ;
    top: 50% ;
    transform: translateY(-50%);
}

/* space for arrow using data-box-direction attribute*/
.arrow[data-box-direction="top"] {
    padding-bottom: var(--zd_size10) ;
}

.arrow[data-box-direction="right"] {
    padding-left: var(--zd_size10) ;
}

.arrow[data-box-direction="left"] {
    padding-right: var(--zd_size10) ;
}

.arrow[data-box-direction="bottom"] {
    padding-top: var(--zd_size10) ;
}

/* space from target using data-box-direction attribute*/
.paddingSpace[data-box-direction="top"] {
    padding-bottom: var(--zd_size5) ;
}

.paddingSpace[data-box-direction="right"] {
    padding-left: var(--zd_size5) ;
}

.paddingSpace[data-box-direction="left"] {
    padding-right: var(--zd_size5) ;
}

.paddingSpace[data-box-direction="bottom"] {
    padding-top: var(--zd_size5) ;
}

.arrowBase {
    position: absolute;
    height: var(--zd_size34) ;
    width: var(--zd_size34) ;
    clip: rect(var(--zd_size3),
 var(--zd_size29),
 var(--zd_size17),
 var(--zd_size8)) ;
    padding: var(--zd_size4) ;
    display: flex;
    align-items: center;
    justify-content: center;
}

.arrowShape {
    height: var(--zd_size10) ;
    width: var(--zd_size10) ;
    box-shadow: 1px -1px 2px 0 var(--dropbox_arrow_box_shadow_color);
    /*css:theme-validation:ignore*/
    background-color: var(--dropbox_bg_color);
    -webkit-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
}

/* arrow placement styles */
.arrowPosition {
    composes: arrowBase;
}

.boxDirection[data-box-direction="top"][data-arrow-position="start"] .arrowPosition,
.boxDirection[data-box-direction="top"][data-arrow-position="end"] .arrowPosition,
.boxDirection[data-box-direction="top"][data-arrow-position="mid"] .arrowPosition {
    bottom: calc( var(--zd_size17) * -1 ) ;
}

.boxDirection[data-box-direction="top"][data-arrow-position="start"] .arrowPosition {
    left: var(--zd_size28) ;
}

.boxDirection[data-box-direction="top"][data-arrow-position="end"] .arrowPosition {
    right: var(--zd_size28) ;
    transform: rotate(180deg) translateX(-50%);
}

.boxDirection[data-box-direction="top"][data-arrow-position="mid"] .arrowPosition {
    left: 50% ;
}

.boxDirection[data-box-direction="top"][data-arrow-position="start"] .arrowPosition,
.boxDirection[data-box-direction="top"][data-arrow-position="mid"] .arrowPosition {
    transform: rotate(180deg) translateX(50%);
}

.boxDirection[data-box-direction="bottom"][data-arrow-position="start"] .arrowPosition,
.boxDirection[data-box-direction="bottom"][data-arrow-position="end"] .arrowPosition,
.boxDirection[data-box-direction="bottom"][data-arrow-position="mid"] .arrowPosition {
    top: calc( var(--zd_size17) * -1 ) ;
}

.boxDirection[data-box-direction="bottom"][data-arrow-position="start"] .arrowPosition {
    left: var(--zd_size28) ;
}

.boxDirection[data-box-direction="bottom"][data-arrow-position="mid"] .arrowPosition {
    left: 50% ;
}

.boxDirection[data-box-direction="bottom"][data-arrow-position="end"] .arrowPosition {
    right: var(--zd_size28) ;
    transform: translateX(50%);
}

.boxDirection[data-box-direction="bottom"][data-arrow-position="mid"] .arrowPosition,
.boxDirection[data-box-direction="bottom"][data-arrow-position="start"] .arrowPosition {
    transform: translateX(-50%);
}

.boxDirection[data-box-direction="left"][data-arrow-position="start"] .arrowPosition,
.boxDirection[data-box-direction="left"][data-arrow-position="mid"] .arrowPosition,
.boxDirection[data-box-direction="left"][data-arrow-position="end"] .arrowPosition {
    right: calc( var(--zd_size17) * -1 ) ;
}

.boxDirection[data-box-direction="left"][data-arrow-position="start"] .arrowPosition {
    top: var(--zd_size28) ;
}

.boxDirection[data-box-direction="left"][data-arrow-position="end"] .arrowPosition {
    transform: rotate(90deg) translateX(50%);
    bottom: var(--zd_size28) ;
}

.boxDirection[data-box-direction="left"][data-arrow-position="mid"] .arrowPosition {
    top: 50% ;
}

.boxDirection[data-box-direction="left"][data-arrow-position="start"] .arrowPosition,
.boxDirection[data-box-direction="left"][data-arrow-position="mid"] .arrowPosition {
    transform: rotate(90deg) translateX(-50%);
}

.boxDirection[data-box-direction="right"][data-arrow-position="start"] .arrowPosition,
.boxDirection[data-box-direction="right"][data-arrow-position="mid"] .arrowPosition,
.boxDirection[data-box-direction="right"][data-arrow-position="end"] .arrowPosition {
    left: calc( var(--zd_size17) * -1 ) ;
}

.boxDirection[data-box-direction="right"][data-arrow-position="start"] .arrowPosition {
    top: var(--zd_size28) ;
}

.boxDirection[data-box-direction="right"][data-arrow-position="mid"] .arrowPosition {
    top: 50% ;
}

.boxDirection[data-box-direction="right"][data-arrow-position="start"] .arrowPosition,
.boxDirection[data-box-direction="right"][data-arrow-position="mid"] .arrowPosition {
    transform: rotate(-90deg) translateX(50%);
}

.boxDirection[data-box-direction="right"][data-arrow-position="end"] .arrowPosition {
    bottom: var(--zd_size28) ;
    transform: rotate(-90deg) translateX(-50%);
}
[data-visible="hidden"],
.hidden {
    visibility: hidden;
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}

[data-visible="hidden"] .subContainer, .hidden .subContainer {
    box-shadow: none;
}

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

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

.fadeInScale {
    composes: animationBasic;
    composes: fadeInScale modeForward from '../../../common/animation.module.css';
}

.fadeIn {
    composes: animationBasic;
    composes: fadeIn modeForward from '../../../common/animation.module.css';
}

.scaleIn {
    composes: animationBasic;
    composes: scaleIn from '../../../common/animation.module.css';
}

.bounce {
    composes: animationBasic;
}

[dir=ltr] .bounce {
    animation-name: animation;
    animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1.1);
}

[dir=rtl] .bounce {
    animation-name: animation;
    animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1.1);
}

.slideUp {
    composes: modeForward from '../../../common/animation.module.css';
}

[dir=ltr] .slideUp {
    animation-duration: var(--zd_transition3);
    animation-name: slideUp;
    animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1);
}

[dir=rtl] .slideUp {
    animation-duration: var(--zd_transition3);
    animation-name: slideUp;
    animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1);
}

@keyframes animation {
    0% {
        transform: scaleY(0.6) perspective(1px);
        opacity: 0;
        transform-origin: top center;
    }

    100% {
        transform-origin: top center;
        opacity: 1;
        transform: scaleY(1) perspective(1px);
    }
}

@keyframes slideUp {
    0% {
        transform: translateY(90%) perspective(1px);
    }

    100% {
        transform: translateY(0%) perspective(1px);
    }
}

.responsive {
    position: absolute;
    bottom: 0 ;
    width: 100% ;
    max-height: 90% ;
}

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

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

.closeBar {
    /*  Variable:Ignore  */
    height: 6px;
    /*css:theme-validation:ignore*/
    width: 20% ;
    margin-block:0 var(--zd_size10) ;
    margin-inline:auto ;
    border-radius: 5px;
    background-color: var(--dropbox_mob_close_bg_color);
    cursor: pointer;
}

.boxPadding {
    --dropbox_padding: var(--zd_size10) 0;
}

.darkPalette {
    --dropbox_bg_color: var(--zdt_dropbox_dark_bg);
}