.ve-input-control {
  align-items: center;
  display: flex;
  flex: 1 0;
  height: 100%;
  min-height: inherit;
  position: relative;
  transition: 0.1s cubic-bezier(0, 0, 0.2, 1);
  transition-property: color, background-color;
  border-color: rgba(var(--ve-border-color), var(--ve-border-opacity));
  border-style: solid;
  border-width: 0px;
}
.ve-input-control--border {
  border-width: thin;
}
.ve-input-control--shape-rounded-sm {
  border-radius: 2px;
}
.ve-input-control--shape-rounded {
  border-radius: 4px;
}
.ve-input-control--shape-rounded-lg {
  border-radius: 8px;
}
.ve-input-control--shape-pill {
  border-radius: 9999px;
}
.ve-input-control--shape-circle {
  border-radius: 50%;
}
.ve-input-control .ve-input-control__border {
  bottom: 0;
  border-color: currentColor;
  border-radius: inherit;
  border-style: inherit;
  border-width: thin;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
}
.ve-input-control .ve-input-control__underlay {
  background-color: currentColor;
  border-radius: inherit;
  bottom: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
}
.ve-input-control.ve-input-control--variant-plain, .ve-input-control.ve-input-control--variant-outlined, .ve-input-control.ve-input-control--variant-text, .ve-input-control.ve-input-control--variant-contained-text, .ve-input-control.ve-input-control--variant-contained-outlined {
  background-color: transparent;
  color: inherit;
}
.ve-input-control.ve-input-control--variant-contained {
  background-color: rgb(var(--ve-theme-secondary));
  color: rgb(var(--ve-theme-on-secondary));
}
.ve-input-control.ve-input-control--variant-plain {
  opacity: 0.62;
}
.ve-input-control.ve-input-control--variant-plain .ve-input-control__overlay {
  display: none;
}
.ve-input-control.ve-input-control--variant-plain:focus, .ve-input-control.ve-input-control--variant-plain:hover {
  opacity: 1;
}
.ve-input-control.ve-input-control--variant-text .ve-input-control__overlay {
  background-color: currentColor;
}
.ve-input-control.ve-input-control--variant-contained-text .ve-input-control__underlay, .ve-input-control.ve-input-control--variant-contained-outlined .ve-input-control__underlay {
  opacity: var(--ve-activated-opacity);
}
.ve-input-control.ve-input-control--variant-outlined:not(.ve-input-control--border) .ve-input-control__border, .ve-input-control.ve-input-control--variant-contained-outlined:not(.ve-input-control--border) .ve-input-control__border {
  opacity: 0.26;
}
.ve-input-control--appended {
  --ve-native-control---padding-right: 4px;
  padding-inline-end: 12px;
}
.ve-input-control--disabled {
  opacity: var(--ve-disabled-opacity);
  pointer-events: none;
}
.ve-input-control--focused {
  color: rgb(var(--ve-theme-on-surface));
  background-color: rgb(var(--ve-theme-surface));
  border-color: rgb(var(--ve-theme-primary));
}
.ve-input-control--focused .ve-input-control__border {
  opacity: 1 !important;
  color: rgb(var(--ve-theme-primary)) !important;
  box-shadow: 0 0 0 2px rgba(var(--ve-theme-primary), var(--ve-focus-opacity));
}
.ve-input-control--prepended {
  --ve-native-control---padding-left: 4px;
  padding-inline-start: 12px;
}
.ve-input-control--prefixed {
  --ve-native-control---padding-left: 4px;
  --ve-padding-left: 12px;
}
.ve-input-control--suffixed {
  --ve-native-control---padding-right: 4px;
  --ve-padding-right: 12px;
}
.ve-input-control__prepend-inner, .ve-input-control__prefix, .ve-input-control__suffix, .ve-input-control__clearable, .ve-input-control__append-inner {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
  min-height: inherit;
  white-space: nowrap;
}
.ve-input-control__prefix, .ve-input-control__suffix {
  opacity: var(--ve-medium-emphasis-opacity);
}
.ve-input-control__input {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 0;
  height: 100%;
  min-height: inherit;
  cursor: text;
  padding-inline-start: var(--ve-padding-left, 0px);
  padding-inline-end: var(--ve-padding-right, 0px);
}
.ve-input-control .ve-native-control {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: inherit;
  padding-inline-start: var(--ve-native-control---padding-left, 12px);
  padding-inline-end: var(--ve-native-control---padding-right, 12px);
  padding-block-start: var(--ve-native-control---padding-top, 4px);
  padding-block-end: var(--ve-native-control---padding-bottom, 4px);
  opacity: var(--ve-high-emphasis-opacity);
  cursor: inherit;
  background-color: transparent;
  border-style: none;
}
.ve-input-control .ve-native-control:focus, .ve-input-control .ve-native-control:active {
  outline: none;
}
.ve-input-control .ve-native-control:invalid {
  box-shadow: none;
}
.ve-input-control__clearable {
  visibility: hidden;
  opacity: var(--ve-medium-emphasis-opacity);
}
.ve-input-control__clearable--has-append-inner {
  display: none;
}
.ve-input-control__clearable > .ve-button {
  --ve-button---height: auto;
  font-size: inherit;
}
.ve-input-control__clearable > .ve-button > .ve-button__overlay {
  top: -15%;
  left: -15%;
  width: 130%;
  height: 130%;
}
.ve-input-control--dirty:hover .ve-input-control__clearable {
  visibility: visible;
  display: inline-flex;
}
.ve-input-control::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  border-radius: inherit;
  background-color: currentColor;
  opacity: 0;
  pointer-events: none;
}
.ve-input-control:not(.ve-input-control--active):hover::before {
  opacity: calc(0.04 * var(--ve-theme-overlay-multiplier, 1));
}