@zohodesk/components/es/TextBoxIcon/TextBoxIcon.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 {
  /* textboxicon default variables */
  --textboxicon_line_height: var(--zd_size1);
  --textboxicon_line_color: var(--zdt_textboxicon_default_line_bg);

  /* textboxicon icon default variables */
  --textboxicon_icon_margin: 0 var(--zd_size5);
  --textboxicon_icon_cursor: pointer;
  --textboxicon_icon_color: var(--zdt_textboxicon_default_icon);
}
.container {
  composes: varClass;
  position: relative;
}
.disabled,.readonly {
  --textboxicon_icon_cursor: not-allowed;
}
.disabled, .readonly {
  cursor: not-allowed;
}
.icon {
  composes: offSelection from '../common/common.module.css';
  margin: var(--textboxicon_icon_margin);
  cursor: var(--textboxicon_icon_cursor);
}
.iconContainer {
  color: var(--textboxicon_icon_color);
}
.effect:hover .iconContainer,
.effect:focus-within .iconContainer {
  --textboxicon_icon_color: var(--zdt_textboxicon_hover_icon);
}
.rotated {
  transform: rotateX(180deg);
}
.line {
  position: absolute;
  bottom: 0 ;
  /*  Variable:Ignore  */
  min-height: 1px;
  transition: var(--zd_transition2);
  height: var(--textboxicon_line_height);
  transform: perspective(1px);
}
[dir=ltr] .line {
  left: 0 ;
  right: 0 ;
}
[dir=rtl] .line {
  right: 0 ;
  left: 0 ;
}
.line, .borderColor_default {
  background-color: var(--textboxicon_line_color);
}
.borderColor_transparent {
  --textboxicon_line_color: var(--zdt_textboxicon_transparent_line_bg);
}
.effect:hover .line {
  --textboxicon_line_color: var(--zdt_textboxicon_hover_line_bg);
}
.effectFocused .line,
.effectFocused:hover .line {
  --textboxicon_line_color: var(--zdt_textboxicon_focus_line_bg);
}
.borderColor_error,
.effect:hover .borderColor_error {
  --textboxicon_line_color: var(--zdt_textboxicon_error_line_bg);
}
.iconOnHoverStyle .icon,
.iconOnHoverReadonly .icon,
.iconOnHoverReadonly:hover .icon {
  opacity: 0;
  visibility: hidden;
}
.iconOnHoverStyle:hover .icon {
  opacity: 1;
  visibility: visible;
}