@zohodesk/components/lib/shared/InputFieldLine/InputFieldLine.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_inputFieldLine_border_color: var(--zdt_inputField_default_border);
    --local_inputFieldLine_border_width: 1px;
    --local_padding: 0;
    --local_cursor: pointer;
}

.customContainer {
    cursor: var(--local_cursor);
    border-color: var(--local_inputFieldLine_border_color);
}

.disabled,
.readonly {
    --local_cursor: not-allowed;
}

.borderColor_default {
    --local_inputFieldLine_border_color: var(--zdt_inputField_default_border);
}

.borderColor_transparent {
    --local_inputFieldLine_border_color: var(--dot_mirror);
}

.borderColor_dark {
    --local_inputFieldLine_border_color: var(--zdt_inputField_dark_border);
}

.borderColor_error,
.effect.borderColor_error:hover {
    --local_inputFieldLine_border_color: var(--zdt_inputField_error_border);
}

.effect.borderColor_transparent:hover,
.effect.borderColor_default:hover {
    --local_inputFieldLine_border_color: var(--zdt_inputField_hover_border);
}

.active.borderColor_dark,
.active.borderColor_dark:hover,
.effect.borderColor_dark:hover {
    --local_inputFieldLine_border_color: var(--zdt_inputField_dark_active_border);
}

.active.borderColor_error,
.active.borderColor_error:hover,
.active.borderColor_default,
.active.borderColor_default:hover,
.active.borderColor_transparent,
.active.borderColor_transparent:hover {
    --local_inputFieldLine_border_color: var(--zdt_inputField_focus_border);
}

.hasBorder {
    transition: border var(--zd_transition2) linear 0s;
    border-style: solid;
}

.padding_small,
.padding_xmedium {
    --local_padding: var(--zd_size3);
}

.padding_medium,
.padding_large {
    --local_padding: var(--zd_size8);
}

.xmedium {
    min-height: var(--zd_size30) ;
}

.small {
    max-height: var(--zd_size200) ;
}

.medium {
    max-height: var(--zd_size350) ;
}

.large {
    max-height: var(--zd_size400) ;
}

.border_bottom {
    border-width: 0 0 var(--local_inputFieldLine_border_width) 0;
    padding-bottom: var(--local_padding);
}

.border_all {
    border-width: var(--local_inputFieldLine_border_width);
    padding: var(--local_padding);
}