.ve-form-control {
  --ve-control-height: calc(var(--ve-form-control---height, 32px) + var(--ve-size-offset, 0px) + var(--ve-density-offset, 0px));
  display: grid;
  align-self: center;
  grid-template-areas: "prepend label control append" "a b details c";
  grid-template-columns: max-content max-content auto max-content;
  grid-template-rows: auto auto;
}
.ve-form-control--size-x-small {
  --ve-size-offset: -8px;
}
.ve-form-control--size-small {
  --ve-size-offset: -4px;
}
.ve-form-control--size-medium {
  --ve-size-offset: 0px;
}
.ve-form-control--size-large {
  --ve-size-offset: 4px;
}
.ve-form-control--size-x-large {
  --ve-size-offset: 8px;
}
.ve-form-control--density-ultra-high {
  --ve-density-offset: -4px;
}
.ve-form-control--density-high {
  --ve-density-offset: -2px;
}
.ve-form-control--density-medium {
  --ve-density-offset: 0px;
}
.ve-form-control--density-low {
  --ve-density-offset: 2px;
}
.ve-form-control--density-ultra-low {
  --ve-density-offset: 4px;
}
.ve-form-control--vertical {
  grid-template-areas: "a label b" "prepend control append" "c details d";
  grid-template-columns: max-content auto max-content;
  grid-template-rows: auto auto;
}
.ve-form-control--inline {
  display: inline-grid;
  vertical-align: middle;
}
.ve-form-control--disabled {
  pointer-events: none;
}
.ve-form-control--disabled,
.ve-form-control--disabled input {
  color: rgba(var(--ve-theme-on-surface), var(--ve-disabled-opacity));
}
.ve-form-control input {
  color: inherit;
}
.ve-form-control--vertical .ve-form-control__label {
  margin-block-end: 8px;
}
.ve-form-control--horizontal .ve-form-control__label {
  margin-inline-end: 16px;
  justify-content: end;
}
.ve-form-control__prepend, .ve-form-control__append, .ve-form-control__control {
  display: flex;
  align-items: center;
  align-self: center;
  flex-wrap: wrap;
}
.ve-form-control__prepend {
  grid-area: prepend;
  margin-inline-end: 12px;
}
.ve-form-control__label {
  grid-area: label;
  display: inline-flex;
}
.ve-form-control__control {
  grid-area: control;
  min-height: var(--ve-control-height);
  width: 100%;
}
.ve-form-control__append {
  grid-area: append;
  margin-inline-start: 12px;
}
.ve-form-control__details {
  align-items: flex-end;
  display: flex;
  font-size: 0.75rem;
  font-weight: 400;
  grid-area: details;
  line-height: normal;
  min-height: 22px;
  overflow: hidden;
  padding: 4px;
  justify-content: space-between;
}