.base 
{
  outline: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* margin: 5px; */
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border-width: 0;
  border: 1px solid var(--lib_base_textbox_base_border);
  padding: var(--lib_size_4)
}

.base::placeholder,
.base.disabled {
  opacity: 0.5;
}

.flushed {
  /* border: 0;
  border-bottom: 1px solid #d3dbe8; */
  border-width: 0 0 1px
}

.contained {
  background-color: var(--lib_base_textbox_filled_bg);
}
.contained:hover {
  background-color: var(--lib_base_textbox_filled_hover_bg);
}

.plain {
  border: 0;
}

/*---colors---*/

.primary, .primary:hover, .primary:focus, .primary.active {
  border-color: var(--lib_base_textbox_primary_border);
}

.secondary{
  border-color: var(--lib_base_textbox_secondary_border);
}
.secondary:hover, .secondary:focus, .secondary.active {
  border-color: var(--lib_base_textbox_secondary_hover_border);
}

.error, .mandatory, .danger, .error:hover, .error:focus, .mandatory:hover, .mandatory:focus, .danger:hover, .danger:focus, .danger.active {
  border-color: var(--lib_base_textbox_danger_border);
}

/*---Sizes---*/
.size_small {
  height: var(--lib_size_20);
}

.size_medium {
  height: var(--lib_size_25);
}

.size_large {
  height: var(--lib_size_30);
}

.size_xlarge {
  height: var(--lib_size_35)
}

.size_stretch {
  width: 100%;
  height: 100%;
}

/*---Shape---*/

.shape_oval {
  border-radius: 2.1875rem;
}

.shape_roundedCorner {
  border-radius: 4px;
}

/* .rounded-corner {
  border-radius: 4px;
}

.rounded {
  border-radius: 50px;
  padding: 0 10px;
} */

/*---States---*/

.disabled {
  cursor: not-allowed;
}

/* .disabled:hover {
  border-color: #d3dbe8;
} */

.base:required {
  border-color: var(--lib_base_textbox_danger_border);
}

/* .iconSpaceLeft {
  padding-left: 25px;
}

.iconSpaceRight {
  padding-right: 25px;
} */

/* .iconCommon {
  position: absolute;
  width: 25px;
  text-align: center;
  bottom: -1px;
  cursor: default;
  top: 3px;
} */

[dir=ltr] .start_icon {
  margin-left: var(--lib_size_5);
  left: 0
}

[dir=rtl] .start_icon {
  margin-right: var(--lib_size_5);
  right: 0
}

[dir=ltr] .end_icon {
  margin-right: var(--lib_size_5);
  right: 0
}

[dir=rtl] .end_icon {
  margin-left: var(--lib_size_5);
  left: 0
}

.label {
  position: relative;
}