@zohodesk/components/lib/v1/Button/css/Button_v1.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 {
    --local-button-border-style: solid;
    --local-button-border-width: 1px;
    --local-button-radius: 4px;
    --local-button-gap: var(--zd_size8);
    --local-button-padding-block: var(--zd_size6);
    --local-button-padding-inline: var(--zd_size15);
    --local-button-font-size: var(--zd_font_size13);
    --local-loader-size: 16px;
    --local-tick-size: 16px;
    --local-button-height: auto;
    --local-button-width: auto;
    --local-button-overlay-opacity: 0.48;
    --local-button-transition-duration: var(--zd_transition3);
}

.button {
    composes: varClass;
    composes: posrel pointer from '../../../common/common.module.css';
    padding-block: var(--local-button-padding-block);
    padding-inline: var(--local-button-padding-inline);
    font-size: var(--local-button-font-size);
    height: var(--local-button-height);
    width: var(--local-button-width);
    border-radius: var(--local-button-radius);
    border-style: var(--local-button-border-style);
    border-width: var(--local-button-border-width);
    transition-duration: var(--local-button-transition-duration);
    transition-timing-function: ease;
    background-image: none;
}

.disabledPointer {
    cursor: not-allowed;
}

.disabledOpac {
    opacity: var(--local-button-overlay-opacity);
}

.loading {
    cursor: progress;
}

.sizeSmall {
    --local-button-padding-block: var(--zd_size4);
    --local-button-padding-inline: var(--zd_size7);
    --local-loader-size: 14px;
    --local-tick-size: 14px;
}

.sizeMedium {
    --local-button-padding-block: var(--zd_size6);
    --local-button-padding-inline: var(--zd_size15);
    --local-loader-size: 16px;
    --local-tick-size: 16px;
}

.sizeLarge {
    --local-button-padding-block: var(--zd_size9);
    --local-button-padding-inline: var(--zd_size14);
    --local-loader-size: 18px;
    --local-tick-size: 18px;
}

.sizeFull {
    --local-button-height: 100%;
    --local-button-width: 100%;
}

.shapeRoundedRectangle {
    --local-button-radius: 4px;
}

.shapePill {
    --local-button-radius: 50px;
}

.shapeRectangle {
    --local-button-radius: 0;
}

.loaderOverlay {
    inset: 0 ;
    composes: posab from '../../../common/common.module.css';
}

.contentWrapper {
    gap: var(--local-button-gap);
}


.overlayHidden {
    composes: contentWrapper;
    visibility: hidden;
    opacity: 0;
}

.strike::after {
    content: '';
    position: absolute;
    inset: 0 ;
    pointer-events: none;
    border-radius: var(--local-button-radius);
}

[dir=ltr] .strike::after {
    background-image: repeating-linear-gradient(120deg, currentColor 0 1px, var(--dot_mirror) 1px 8px);
}

[dir=rtl] .strike::after {
    background-image: repeating-linear-gradient(-120deg, currentColor 0 1px, var(--dot_mirror) 1px 8px);
}

.successOverlay {
    inset: 0 ;
    composes: posab from '../../../common/common.module.css';
}