.inputParent {
  border-radius: var(--sema-rounding-300);
  box-sizing: border-box;
  display: block;
  isolation: isolate;
  position: relative;
  width: 100%;
}

.input {
  appearance: none;
  background: none;
  border: none;
  color: inherit;
  display: block;
  outline: 0;
  padding: 0;
  width: 100%;
}

.inliner {
  display: flex;
  flex-wrap: wrap;
}

.disabled {
  background-color: var(--sema-color-background-disabled);
  border: 1px solid var(--sema-color-border-disabled);
}

.disabledText {
  color: var(--sema-color-text-disabled);
}

.enabledText {
  color: var(--sema-color-text-default);
}

.enabled {
  background: var(--sema-color-background-default);
}

.borderFocus {
  border: 1px solid var(--sema-color-border-focus-inner-default);
  outline: 2px solid var(--sema-color-border-focus-outer-default);
}

.errorBorderFocus {
  border: 1.5px solid var(--sema-color-border-focus-inner-default);
  outline: 2px solid var(--sema-color-border-focus-outer-default);
}

.enabledBorder {
  border: 1px solid var(--sema-color-border-interactive);
}

.enabledBorderHover {
  border: 1px solid var(--sema-color-hover-border-interactive);
}

.errorBorder {
  border: 1.5px solid var(--sema-color-border-error);
}

.errorBorderHover {
  border: 1.5px solid var(--sema-color-hover-border-error);
}

.label {
  color: inherit;
  padding: 0;
  position: absolute;
  z-index: 1;
}

/* sm */

.sm_input {
  min-height: 28px;
  padding-bottom: var(--sema-space-100);
}

.sm_input_text {
  composes: sm smDefault from "../Text.css";
}

html[dir="rtl"] .sm_inputHorizontalPadding {
  padding-left: var(--sema-space-100);
  padding-right: var(--sema-space-200);
}

html:not([dir="rtl"]) .sm_inputHorizontalPadding {
  padding-left: var(--sema-space-200);
  padding-right: var(--sema-space-100);
}

.sm_visibleLabel {
  padding-top: calc(
    var(--sema-space-100) + (var(--sema-font-size-ui-sm) * 1.1)
  );
}

.sm_noLabel {
  padding-top: var(--sema-space-100);
}

html:not([dir="rtl"]) .sm_actionButton {
  padding-right: var(--space-800);
}

html[dir="rtl"] .sm_actionButton {
  padding-left: var(--space-800);
}

/* md */

.md_input {
  min-height: 36px;
  padding-bottom: var(--sema-space-200);
}

.md_input_text {
  composes: md mdDefault from "../Text.css";
}

html[dir="rtl"] .md_inputHorizontalPadding {
  padding-left: var(--sema-space-200);
  padding-right: var(--sema-space-300);
}

html:not([dir="rtl"]) .md_inputHorizontalPadding {
  padding-left: var(--sema-space-300);
  padding-right: var(--sema-space-200);
}

.md_visibleLabel {
  padding-top: calc(
    var(--sema-space-300) + (var(--sema-font-size-ui-md) * 1.1)
  );
}

.md_noLabel {
  padding-top: var(--sema-space-200);
}

html[dir="rtl"] .md_label {
  left: calc(var(--sema-space-300));
  right: calc(var(--sema-space-300) + 1px);
}

html:not([dir="rtl"]) .md_label {
  left: calc(var(--sema-space-300) + 1px);
  right: calc(var(--sema-space-300));
}

.md_labelPos {
  top: var(--sema-space-200);
}

html[dir="rtl"] .sm_label {
  left: calc(var(--sema-space-200));
  right: calc(var(--sema-space-200) + 1px);
}

html:not([dir="rtl"]) .sm_label {
  left: calc(var(--sema-space-200) + 1px);
  right: calc(var(--sema-space-200));
}

.sm_labelPos {
  top: var(--sema-space-100);
}

html:not([dir="rtl"]) .md_actionButton {
  padding-right: var(--space-800);
}

html[dir="rtl"] .md_actionButton {
  padding-left: var(--space-800);
}

/* lg */

.lg_input {
  min-height: 48px;
  padding-bottom: var(--sema-space-300);
}

.lg_input_text {
  composes: md mdDefault from "../Text.css";
}

html[dir="rtl"] .lg_inputHorizontalPadding {
  padding-left: var(--sema-space-300);
  padding-right: var(--sema-space-400);
}

html:not([dir="rtl"]) .lg_inputHorizontalPadding {
  padding-left: var(--sema-space-400);
  padding-right: var(--sema-space-300);
}

.lg_visibleLabel {
  padding-top: calc(
    var(--sema-space-400) + (var(--sema-font-size-ui-md) * 1.1)
  );
}

.lg_noLabel {
  padding-top: var(--sema-space-300);
}

html[dir="rtl"] .lg_label {
  left: calc(var(--sema-space-400));
  right: calc(var(--sema-space-400) + 1px);
}

html:not([dir="rtl"]) .lg_label {
  left: calc(var(--sema-space-400) + 1px);
  right: calc(var(--sema-space-400));
}

.lg_labelPos {
  top: var(--sema-space-300);
}

html:not([dir="rtl"]) .lg_actionButton {
  padding-right: var(--space-800);
}

html[dir="rtl"] .lg_actionButton {
  padding-left: var(--space-800);
}