@vuetify/nightly 3.7.4-dev.2024-11-06 → 3.7.4-next.2024-11-06

package/lib/components/VField/VField.css

@@ -1,584 +1,544 @@
-/* region INPUT */
-.v-field {
-  display: grid;
-  grid-template-areas: "prepend-inner field clear append-inner";
-  grid-template-columns: min-content minmax(0, 1fr) min-content min-content;
-  font-size: 16px;
-  letter-spacing: 0.009375em;
-  max-width: 100%;
-  border-radius: 4px;
-  contain: layout;
-  flex: 1 0;
-  grid-area: control;
-  position: relative;
-  --v-theme-overlay-multiplier: 1;
-  --v-field-padding-start: 16px;
-  --v-field-padding-end: 16px;
-  --v-field-padding-top: 8px;
-  --v-field-padding-bottom: 4px;
-  --v-field-input-padding-top: calc(var(--v-field-padding-top, 8px) + var(--v-input-padding-top, 0));
-  --v-field-input-padding-bottom: var(--v-field-padding-bottom, 4px);
-}
-.v-field--disabled {
-  opacity: var(--v-disabled-opacity);
-  pointer-events: none;
-}
-.v-field .v-chip {
-  --v-chip-height: 24px;
-}
-
-/* endregion */
-/* region MODIFIERS */
-.v-field--prepended {
-  padding-inline-start: 12px;
-}
-.v-field--appended {
-  padding-inline-end: 12px;
-}
-.v-field--variant-solo, .v-field--variant-solo-filled {
-  background: rgb(var(--v-theme-surface));
-  border-color: transparent;
-  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
-}
-.v-field--variant-solo, .v-field--variant-solo-filled {
-  box-shadow: 0px 3px 1px -2px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 2px 2px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 5px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
-}
-.v-field--variant-solo-inverted {
-  background: rgb(var(--v-theme-surface));
-  border-color: transparent;
-  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
-}
-.v-field--variant-solo-inverted {
-  box-shadow: 0px 3px 1px -2px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 2px 2px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 5px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
-}
-.v-field--variant-solo-inverted.v-field--focused {
-  color: rgb(var(--v-theme-on-surface-variant));
-}
-.v-field--variant-filled {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.v-input--density-default .v-field--variant-solo, .v-input--density-default .v-field--variant-solo-inverted, .v-input--density-default .v-field--variant-solo-filled, .v-input--density-default .v-field--variant-filled {
-  --v-input-control-height: 56px;
-  --v-field-padding-bottom: 4px;
-}
-
-.v-input--density-comfortable .v-field--variant-solo, .v-input--density-comfortable .v-field--variant-solo-inverted, .v-input--density-comfortable .v-field--variant-solo-filled, .v-input--density-comfortable .v-field--variant-filled {
-  --v-input-control-height: 48px;
-  --v-field-padding-bottom: 0px;
-}
-
-.v-input--density-compact .v-field--variant-solo, .v-input--density-compact .v-field--variant-solo-inverted, .v-input--density-compact .v-field--variant-solo-filled, .v-input--density-compact .v-field--variant-filled {
-  --v-input-control-height: 40px;
-  --v-field-padding-bottom: 0px;
-}
-
-.v-field--variant-outlined, .v-field--single-line, .v-field--no-label {
-  --v-field-padding-top: 0px;
-}
-.v-input--density-default .v-field--variant-outlined, .v-input--density-default .v-field--single-line, .v-input--density-default .v-field--no-label {
-  --v-field-padding-bottom: 16px;
-}
-
-.v-input--density-comfortable .v-field--variant-outlined, .v-input--density-comfortable .v-field--single-line, .v-input--density-comfortable .v-field--no-label {
-  --v-field-padding-bottom: 12px;
-}
-
-.v-input--density-compact .v-field--variant-outlined, .v-input--density-compact .v-field--single-line, .v-input--density-compact .v-field--no-label {
-  --v-field-padding-bottom: 8px;
-}
-
-.v-field--variant-plain, .v-field--variant-underlined {
-  border-radius: 0;
-  padding: 0;
-}
-.v-field--variant-plain.v-field, .v-field--variant-underlined.v-field {
-  --v-field-padding-start: 0px;
-  --v-field-padding-end: 0px;
-}
-.v-input--density-default .v-field--variant-plain, .v-input--density-default .v-field--variant-underlined {
-  --v-input-control-height: 48px;
-  --v-field-padding-top: 4px;
-  --v-field-padding-bottom: 4px;
-}
-
-.v-input--density-comfortable .v-field--variant-plain, .v-input--density-comfortable .v-field--variant-underlined {
-  --v-input-control-height: 40px;
-  --v-field-padding-top: 2px;
-  --v-field-padding-bottom: 0px;
-}
-
-.v-input--density-compact .v-field--variant-plain, .v-input--density-compact .v-field--variant-underlined {
-  --v-input-control-height: 32px;
-  --v-field-padding-top: 0px;
-  --v-field-padding-bottom: 0px;
-}
-
-.v-field--flat {
-  box-shadow: none;
-}
-.v-field--rounded {
-  border-radius: 24px;
-}
-.v-field.v-field--prepended {
-  --v-field-padding-start: 6px;
-}
-.v-field.v-field--appended {
-  --v-field-padding-end: 6px;
-}
-
-/* endregion */
-/* region ELEMENTS */
-.v-field__input {
-  align-items: center;
-  color: inherit;
-  column-gap: 2px;
-  display: flex;
-  flex-wrap: wrap;
-  letter-spacing: 0.009375em;
-  opacity: var(--v-high-emphasis-opacity);
-  min-height: max(var(--v-input-control-height, 56px), 1.5rem + var(--v-field-input-padding-top) + var(--v-field-input-padding-bottom));
-  min-width: 0;
-  padding-inline: var(--v-field-padding-start) var(--v-field-padding-end);
-  padding-top: var(--v-field-input-padding-top);
-  padding-bottom: var(--v-field-input-padding-bottom);
-  position: relative;
-  width: 100%;
-}
-.v-input--density-default .v-field__input {
-  row-gap: 8px;
-}
-
-.v-input--density-comfortable .v-field__input {
-  row-gap: 6px;
-}
-
-.v-input--density-compact .v-field__input {
-  row-gap: 4px;
-}
-
-.v-field__input input {
-  letter-spacing: inherit;
-}
-.v-field__input input::placeholder,
-input.v-field__input::placeholder,
-textarea.v-field__input::placeholder {
-  color: currentColor;
-  opacity: var(--v-disabled-opacity);
-}
-
-.v-field__input:focus, .v-field__input:active {
-  outline: none;
-}
-.v-field__input:invalid {
-  box-shadow: none;
-}
-
-.v-field__field {
-  flex: 1 0;
-  grid-area: field;
-  position: relative;
-  align-items: flex-start;
-  display: flex;
-}
-
-/* endregion */
-/* region AFFIXES */
-.v-field__prepend-inner {
-  grid-area: prepend-inner;
-  padding-inline-end: var(--v-field-padding-after);
-}
-
-.v-field__clearable {
-  grid-area: clear;
-}
-
-.v-field__append-inner {
-  grid-area: append-inner;
-  padding-inline-start: var(--v-field-padding-after);
-}
-
-.v-field__append-inner,
-.v-field__clearable,
-.v-field__prepend-inner {
-  display: flex;
-  align-items: flex-start;
-  padding-top: var(--v-input-padding-top, 8px);
-}
-.v-field--center-affix .v-field__append-inner,
-.v-field--center-affix .v-field__clearable,
-.v-field--center-affix .v-field__prepend-inner {
-  align-items: center;
-  padding-top: 0;
-}
-
-.v-field.v-field--variant-underlined .v-field__append-inner,
-.v-field.v-field--variant-underlined .v-field__clearable,
-.v-field.v-field--variant-underlined .v-field__prepend-inner,
-.v-field.v-field--variant-plain .v-field__append-inner,
-.v-field.v-field--variant-plain .v-field__clearable,
-.v-field.v-field--variant-plain .v-field__prepend-inner {
-  align-items: flex-start;
-  padding-top: calc(var(--v-field-padding-top, 8px) + var(--v-input-padding-top, 0));
-  padding-bottom: var(--v-field-padding-bottom, 4px);
-}
-
-.v-field--focused .v-field__prepend-inner,
-.v-field--focused .v-field__append-inner {
-  opacity: 1;
-}
-
-.v-field__prepend-inner > .v-icon,
-.v-field__append-inner > .v-icon,
-.v-field__clearable > .v-icon {
-  opacity: var(--v-medium-emphasis-opacity);
-}
-.v-field--disabled .v-field__prepend-inner > .v-icon, .v-field--error .v-field__prepend-inner > .v-icon,
-.v-field--disabled .v-field__append-inner > .v-icon,
-.v-field--error .v-field__append-inner > .v-icon,
-.v-field--disabled .v-field__clearable > .v-icon,
-.v-field--error .v-field__clearable > .v-icon {
-  opacity: 1;
-}
-.v-field--error:not(.v-field--disabled) .v-field__prepend-inner > .v-icon,
-.v-field--error:not(.v-field--disabled) .v-field__append-inner > .v-icon,
-.v-field--error:not(.v-field--disabled) .v-field__clearable > .v-icon {
-  color: rgb(var(--v-theme-error));
-}
-
-.v-field__clearable {
-  cursor: pointer;
-  opacity: 0;
-  overflow: hidden;
-  margin-inline: 4px;
-  transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-  transition-property: opacity, transform, width;
-}
-.v-field--focused .v-field__clearable, .v-field--persistent-clear .v-field__clearable {
-  opacity: 1;
-}
-@media (hover: hover) {
-  .v-field:hover .v-field__clearable {
+@layer vuetify.components {
+  /* region INPUT */
+  .v-field {
+    display: grid;
+    grid-template-areas: "prepend-inner field clear append-inner";
+    grid-template-columns: min-content minmax(0, 1fr) min-content min-content;
+    font-size: 16px;
+    letter-spacing: 0.009375em;
+    max-width: 100%;
+    border-radius: 4px;
+    contain: layout;
+    flex: 1 0;
+    grid-area: control;
+    position: relative;
+    --v-theme-overlay-multiplier: 1;
+    --v-field-padding-start: 16px;
+    --v-field-padding-end: 16px;
+    --v-field-padding-top: 8px;
+    --v-field-padding-bottom: 4px;
+    --v-field-input-padding-top: calc(var(--v-field-padding-top, 8px) + var(--v-input-padding-top, 0));
+    --v-field-input-padding-bottom: var(--v-field-padding-bottom, 4px);
+  }
+  .v-field--disabled {
+    opacity: var(--v-disabled-opacity);
+    pointer-events: none;
+  }
+  .v-field .v-chip {
+    --v-chip-height: 24px;
+  }
+  /* endregion */
+  /* region MODIFIERS */
+  .v-field--prepended {
+    padding-inline-start: 12px;
+  }
+  .v-field--appended {
+    padding-inline-end: 12px;
+  }
+  .v-field--variant-solo, .v-field--variant-solo-filled {
+    background: rgb(var(--v-theme-surface));
+    border-color: transparent;
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+  }
+  .v-field--variant-solo, .v-field--variant-solo-filled {
+    box-shadow: 0px 3px 1px -2px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 2px 2px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 5px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
+  }
+  .v-field--variant-solo-inverted {
+    background: rgb(var(--v-theme-surface));
+    border-color: transparent;
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+  }
+  .v-field--variant-solo-inverted {
+    box-shadow: 0px 3px 1px -2px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 2px 2px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 5px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
+  }
+  .v-field--variant-solo-inverted.v-field--focused {
+    color: rgb(var(--v-theme-on-surface-variant));
+  }
+  .v-field--variant-filled {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .v-input--density-default .v-field--variant-solo, .v-input--density-default .v-field--variant-solo-inverted, .v-input--density-default .v-field--variant-solo-filled, .v-input--density-default .v-field--variant-filled {
+    --v-input-control-height: 56px;
+    --v-field-padding-bottom: 4px;
+  }
+  .v-input--density-comfortable .v-field--variant-solo, .v-input--density-comfortable .v-field--variant-solo-inverted, .v-input--density-comfortable .v-field--variant-solo-filled, .v-input--density-comfortable .v-field--variant-filled {
+    --v-input-control-height: 48px;
+    --v-field-padding-bottom: 0px;
+  }
+  .v-input--density-compact .v-field--variant-solo, .v-input--density-compact .v-field--variant-solo-inverted, .v-input--density-compact .v-field--variant-solo-filled, .v-input--density-compact .v-field--variant-filled {
+    --v-input-control-height: 40px;
+    --v-field-padding-bottom: 0px;
+  }
+  .v-field--variant-outlined, .v-field--single-line, .v-field--no-label {
+    --v-field-padding-top: 0px;
+  }
+  .v-input--density-default .v-field--variant-outlined, .v-input--density-default .v-field--single-line, .v-input--density-default .v-field--no-label {
+    --v-field-padding-bottom: 16px;
+  }
+  .v-input--density-comfortable .v-field--variant-outlined, .v-input--density-comfortable .v-field--single-line, .v-input--density-comfortable .v-field--no-label {
+    --v-field-padding-bottom: 12px;
+  }
+  .v-input--density-compact .v-field--variant-outlined, .v-input--density-compact .v-field--single-line, .v-input--density-compact .v-field--no-label {
+    --v-field-padding-bottom: 8px;
+  }
+  .v-field--variant-plain, .v-field--variant-underlined {
+    border-radius: 0;
+    padding: 0;
+  }
+  .v-field--variant-plain.v-field, .v-field--variant-underlined.v-field {
+    --v-field-padding-start: 0px;
+    --v-field-padding-end: 0px;
+  }
+  .v-input--density-default .v-field--variant-plain, .v-input--density-default .v-field--variant-underlined {
+    --v-input-control-height: 48px;
+    --v-field-padding-top: 4px;
+    --v-field-padding-bottom: 4px;
+  }
+  .v-input--density-comfortable .v-field--variant-plain, .v-input--density-comfortable .v-field--variant-underlined {
+    --v-input-control-height: 40px;
+    --v-field-padding-top: 2px;
+    --v-field-padding-bottom: 0px;
+  }
+  .v-input--density-compact .v-field--variant-plain, .v-input--density-compact .v-field--variant-underlined {
+    --v-input-control-height: 32px;
+    --v-field-padding-top: 0px;
+    --v-field-padding-bottom: 0px;
+  }
+  .v-field--flat {
+    box-shadow: none;
+  }
+  .v-field--rounded {
+    border-radius: 24px;
+  }
+  .v-field.v-field--prepended {
+    --v-field-padding-start: 6px;
+  }
+  .v-field.v-field--appended {
+    --v-field-padding-end: 6px;
+  }
+  /* endregion */
+  /* region ELEMENTS */
+  .v-field__input {
+    align-items: center;
+    color: inherit;
+    column-gap: 2px;
+    display: flex;
+    flex-wrap: wrap;
+    letter-spacing: 0.009375em;
+    opacity: var(--v-high-emphasis-opacity);
+    min-height: max(var(--v-input-control-height, 56px), 1.5rem + var(--v-field-input-padding-top) + var(--v-field-input-padding-bottom));
+    min-width: 0;
+    padding-inline: var(--v-field-padding-start) var(--v-field-padding-end);
+    padding-top: var(--v-field-input-padding-top);
+    padding-bottom: var(--v-field-input-padding-bottom);
+    position: relative;
+    width: 100%;
+  }
+  .v-input--density-default .v-field__input {
+    row-gap: 8px;
+  }
+  .v-input--density-comfortable .v-field__input {
+    row-gap: 6px;
+  }
+  .v-input--density-compact .v-field__input {
+    row-gap: 4px;
+  }
+  .v-field__input input {
+    letter-spacing: inherit;
+  }
+  .v-field__input input::placeholder,
+  input.v-field__input::placeholder,
+  textarea.v-field__input::placeholder {
+    color: currentColor;
+    opacity: var(--v-disabled-opacity);
+  }
+  .v-field__input:focus, .v-field__input:active {
+    outline: none;
+  }
+  .v-field__input:invalid {
+    box-shadow: none;
+  }
+  .v-field__field {
+    flex: 1 0;
+    grid-area: field;
+    position: relative;
+    align-items: flex-start;
+    display: flex;
+  }
+  /* endregion */
+  /* region AFFIXES */
+  .v-field__prepend-inner {
+    grid-area: prepend-inner;
+    padding-inline-end: var(--v-field-padding-after);
+  }
+  .v-field__clearable {
+    grid-area: clear;
+  }
+  .v-field__append-inner {
+    grid-area: append-inner;
+    padding-inline-start: var(--v-field-padding-after);
+  }
+  .v-field__append-inner,
+  .v-field__clearable,
+  .v-field__prepend-inner {
+    display: flex;
+    align-items: flex-start;
+    padding-top: var(--v-input-padding-top, 8px);
+  }
+  .v-field--center-affix .v-field__append-inner,
+  .v-field--center-affix .v-field__clearable,
+  .v-field--center-affix .v-field__prepend-inner {
+    align-items: center;
+    padding-top: 0;
+  }
+  .v-field.v-field--variant-underlined .v-field__append-inner,
+  .v-field.v-field--variant-underlined .v-field__clearable,
+  .v-field.v-field--variant-underlined .v-field__prepend-inner,
+  .v-field.v-field--variant-plain .v-field__append-inner,
+  .v-field.v-field--variant-plain .v-field__clearable,
+  .v-field.v-field--variant-plain .v-field__prepend-inner {
+    align-items: flex-start;
+    padding-top: calc(var(--v-field-padding-top, 8px) + var(--v-input-padding-top, 0));
+    padding-bottom: var(--v-field-padding-bottom, 4px);
+  }
+  .v-field--focused .v-field__prepend-inner,
+  .v-field--focused .v-field__append-inner {
     opacity: 1;
   }
-}
-@media (hover: none) {
+  .v-field__prepend-inner > .v-icon,
+  .v-field__append-inner > .v-icon,
+  .v-field__clearable > .v-icon {
+    opacity: var(--v-medium-emphasis-opacity);
+  }
+  .v-field--disabled .v-field__prepend-inner > .v-icon, .v-field--error .v-field__prepend-inner > .v-icon,
+  .v-field--disabled .v-field__append-inner > .v-icon,
+  .v-field--error .v-field__append-inner > .v-icon,
+  .v-field--disabled .v-field__clearable > .v-icon,
+  .v-field--error .v-field__clearable > .v-icon {
+    opacity: 1;
+  }
+  .v-field--error:not(.v-field--disabled) .v-field__prepend-inner > .v-icon,
+  .v-field--error:not(.v-field--disabled) .v-field__append-inner > .v-icon,
+  .v-field--error:not(.v-field--disabled) .v-field__clearable > .v-icon {
+    color: rgb(var(--v-theme-error));
+  }
   .v-field__clearable {
+    cursor: pointer;
+    opacity: 0;
+    overflow: hidden;
+    margin-inline: 4px;
+    transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+    transition-property: opacity, transform, width;
+  }
+  .v-field--focused .v-field__clearable, .v-field--persistent-clear .v-field__clearable {
+    opacity: 1;
+  }
+  @media (hover: hover) {
+    .v-field:hover .v-field__clearable {
+      opacity: 1;
+    }
+  }
+  @media (hover: none) {
+    .v-field__clearable {
+      opacity: 1;
+    }
+  }
+  /* endregion */
+  /* region LABEL */
+  .v-label.v-field-label {
+    contain: layout paint;
+    display: block;
+    margin-inline-start: var(--v-field-padding-start);
+    margin-inline-end: var(--v-field-padding-end);
+    max-width: calc(100% - var(--v-field-padding-start) - var(--v-field-padding-end));
+    pointer-events: none;
+    position: absolute;
+    top: var(--v-input-padding-top);
+    transform-origin: left center;
+    transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+    transition-property: opacity, transform;
+    z-index: 1;
+  }
+  .v-field--variant-underlined .v-label.v-field-label, .v-field--variant-plain .v-label.v-field-label {
+    top: calc(var(--v-input-padding-top) + var(--v-field-padding-top));
+  }
+  .v-field--center-affix .v-label.v-field-label {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+  .v-field--active .v-label.v-field-label {
+    visibility: hidden;
+  }
+  .v-field--focused .v-label.v-field-label, .v-field--error .v-label.v-field-label {
+    opacity: 1;
+  }
+  .v-field--error:not(.v-field--disabled) .v-label.v-field-label {
+    color: rgb(var(--v-theme-error));
+  }
+  .v-label.v-field-label--floating {
+    --v-field-label-scale: 0.75em;
+    font-size: var(--v-field-label-scale);
+    visibility: hidden;
+    max-width: 100%;
+  }
+  .v-field--center-affix .v-label.v-field-label--floating {
+    transform: none;
+  }
+  .v-field.v-field--active .v-label.v-field-label--floating {
+    visibility: unset;
+  }
+  .v-input--density-default .v-field--variant-solo .v-label.v-field-label--floating, .v-input--density-default .v-field--variant-solo-inverted .v-label.v-field-label--floating, .v-input--density-default .v-field--variant-filled .v-label.v-field-label--floating, .v-input--density-default .v-field--variant-solo-filled .v-label.v-field-label--floating {
+    top: 7px;
+  }
+  .v-input--density-comfortable .v-field--variant-solo .v-label.v-field-label--floating, .v-input--density-comfortable .v-field--variant-solo-inverted .v-label.v-field-label--floating, .v-input--density-comfortable .v-field--variant-filled .v-label.v-field-label--floating, .v-input--density-comfortable .v-field--variant-solo-filled .v-label.v-field-label--floating {
+    top: 5px;
+  }
+  .v-input--density-compact .v-field--variant-solo .v-label.v-field-label--floating, .v-input--density-compact .v-field--variant-solo-inverted .v-label.v-field-label--floating, .v-input--density-compact .v-field--variant-filled .v-label.v-field-label--floating, .v-input--density-compact .v-field--variant-solo-filled .v-label.v-field-label--floating {
+    top: 3px;
+  }
+  .v-field--variant-plain .v-label.v-field-label--floating, .v-field--variant-underlined .v-label.v-field-label--floating {
+    transform: translateY(-16px);
+    margin: 0;
+    top: var(--v-input-padding-top);
+  }
+  .v-field--variant-outlined .v-label.v-field-label--floating {
+    transform: translateY(-50%);
+    transform-origin: center;
+    position: static;
+    margin: 0 4px;
+  }
+  /* endregion */
+  /* region OUTLINE */
+  .v-field__outline {
+    --v-field-border-width: 1px;
+    --v-field-border-opacity: 0.38;
+    align-items: stretch;
+    contain: layout;
+    display: flex;
+    height: 100%;
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+    width: 100%;
+  }
+  @media (hover: hover) {
+    .v-field:hover .v-field__outline {
+      --v-field-border-opacity: var(--v-high-emphasis-opacity);
+    }
+  }
+  .v-field--error:not(.v-field--disabled) .v-field__outline {
+    color: rgb(var(--v-theme-error));
+  }
+  .v-field.v-field--focused .v-field__outline, .v-input.v-input--error .v-field__outline {
+    --v-field-border-opacity: 1;
+  }
+  .v-field--variant-outlined.v-field--focused .v-field__outline {
+    --v-field-border-width: 2px;
+  }
+  .v-field--variant-filled .v-field__outline::before, .v-field--variant-underlined .v-field__outline::before {
+    border-color: currentColor;
+    border-style: solid;
+    border-width: 0 0 var(--v-field-border-width);
+    opacity: var(--v-field-border-opacity);
+    transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  .v-field--variant-filled .v-field__outline::before, .v-field--variant-underlined .v-field__outline::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+  .v-field--variant-filled .v-field__outline::after, .v-field--variant-underlined .v-field__outline::after {
+    border-color: currentColor;
+    border-style: solid;
+    border-width: 0 0 2px;
+    transform: scaleX(0);
+    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  .v-field--variant-filled .v-field__outline::after, .v-field--variant-underlined .v-field__outline::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+  .v-field--focused.v-field--variant-filled .v-field__outline::after, .v-field--focused.v-field--variant-underlined .v-field__outline::after {
+    transform: scaleX(1);
+  }
+  .v-field--variant-outlined .v-field__outline {
+    border-radius: inherit;
+  }
+  .v-field--variant-outlined .v-field__outline__start, .v-field--variant-outlined .v-field__outline__notch::before, .v-field--variant-outlined .v-field__outline__notch::after, .v-field--variant-outlined .v-field__outline__end {
+    border: 0 solid currentColor;
+    opacity: var(--v-field-border-opacity);
+    transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  .v-field--variant-outlined .v-field__outline__start {
+    flex: 0 0 12px;
+    border-top-width: var(--v-field-border-width);
+    border-bottom-width: var(--v-field-border-width);
+    border-inline-start-width: var(--v-field-border-width);
+    border-start-start-radius: inherit;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+    border-end-start-radius: inherit;
+  }
+  .v-field--rounded.v-field--variant-outlined .v-field__outline__start,
+  [class^=rounded-].v-field--variant-outlined .v-field__outline__start,
+  [class*=" rounded-"].v-field--variant-outlined .v-field__outline__start {
+    flex-basis: calc(var(--v-input-control-height) / 2 + 2px);
+  }
+  .v-field--reverse.v-field--variant-outlined .v-field__outline__start {
+    border-start-start-radius: 0;
+    border-start-end-radius: inherit;
+    border-end-end-radius: inherit;
+    border-end-start-radius: 0;
+    border-inline-end-width: var(--v-field-border-width);
+    border-inline-start-width: 0;
+  }
+  .v-field--variant-outlined .v-field__outline__notch {
+    flex: none;
+    position: relative;
+    max-width: calc(100% - 12px);
+  }
+  .v-field--variant-outlined .v-field__outline__notch::before, .v-field--variant-outlined .v-field__outline__notch::after {
+    opacity: var(--v-field-border-opacity);
+    transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  .v-field--variant-outlined .v-field__outline__notch::before, .v-field--variant-outlined .v-field__outline__notch::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+  .v-field--variant-outlined .v-field__outline__notch::before {
+    border-width: var(--v-field-border-width) 0 0;
+  }
+  .v-field--variant-outlined .v-field__outline__notch::after {
+    bottom: 0;
+    border-width: 0 0 var(--v-field-border-width);
+  }
+  .v-field--active.v-field--variant-outlined .v-field__outline__notch::before {
+    opacity: 0;
+  }
+  .v-field--variant-outlined .v-field__outline__end {
+    flex: 1;
+    border-top-width: var(--v-field-border-width);
+    border-bottom-width: var(--v-field-border-width);
+    border-inline-end-width: var(--v-field-border-width);
+    border-start-start-radius: 0;
+    border-start-end-radius: inherit;
+    border-end-end-radius: inherit;
+    border-end-start-radius: 0;
+  }
+  .v-field--reverse.v-field--variant-outlined .v-field__outline__end {
+    border-start-start-radius: inherit;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+    border-end-start-radius: inherit;
+    border-inline-end-width: 0;
+    border-inline-start-width: var(--v-field-border-width);
+  }
+  /* endregion */
+  /* region LOADER */
+  .v-field__loader {
+    top: calc(100% - 2px);
+    left: 0;
+    position: absolute;
+    right: 0;
+    width: 100%;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+    overflow: hidden;
+  }
+  .v-field--variant-outlined .v-field__loader {
+    top: calc(100% - 3px);
+    width: calc(100% - 1px * 2);
+    left: 1px;
+  }
+  /* endregion */
+  /* region OVERLAY */
+  .v-field__overlay {
+    border-radius: inherit;
+    pointer-events: none;
+  }
+  .v-field__overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+  .v-field--variant-filled .v-field__overlay {
+    background-color: currentColor;
+    opacity: 0.04;
+    transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  .v-field--variant-filled.v-field--has-background .v-field__overlay {
+    opacity: 0;
+  }
+  @media (hover: hover) {
+    .v-field--variant-filled:hover .v-field__overlay {
+      opacity: calc((0.04 + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
+    }
+  }
+  .v-field--variant-filled.v-field--focused .v-field__overlay {
+    opacity: calc((0.04 + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
+  }
+  .v-field--variant-solo-filled .v-field__overlay {
+    background-color: currentColor;
+    opacity: 0.04;
+    transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  @media (hover: hover) {
+    .v-field--variant-solo-filled:hover .v-field__overlay {
+      opacity: calc((0.04 + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
+    }
+  }
+  .v-field--variant-solo-filled.v-field--focused .v-field__overlay {
+    opacity: calc((0.04 + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
+  }
+  .v-field--variant-solo-inverted .v-field__overlay {
+    transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  .v-field--variant-solo-inverted.v-field--has-background .v-field__overlay {
+    opacity: 0;
+  }
+  @media (hover: hover) {
+    .v-field--variant-solo-inverted:hover .v-field__overlay {
+      opacity: calc((0.04 + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
+    }
+  }
+  .v-field--variant-solo-inverted.v-field--focused .v-field__overlay {
+    background-color: rgb(var(--v-theme-surface-variant));
     opacity: 1;
   }
-}
-
-/* endregion */
-/* region LABEL */
-.v-label.v-field-label {
-  contain: layout paint;
-  display: block;
-  margin-inline-start: var(--v-field-padding-start);
-  margin-inline-end: var(--v-field-padding-end);
-  max-width: calc(100% - var(--v-field-padding-start) - var(--v-field-padding-end));
-  pointer-events: none;
-  position: absolute;
-  top: var(--v-input-padding-top);
-  transform-origin: left center;
-  transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-  transition-property: opacity, transform;
-  z-index: 1;
-}
-.v-field--variant-underlined .v-label.v-field-label, .v-field--variant-plain .v-label.v-field-label {
-  top: calc(var(--v-input-padding-top) + var(--v-field-padding-top));
-}
-.v-field--center-affix .v-label.v-field-label {
-  top: 50%;
-  transform: translateY(-50%);
-}
-.v-field--active .v-label.v-field-label {
-  visibility: hidden;
-}
-.v-field--focused .v-label.v-field-label, .v-field--error .v-label.v-field-label {
-  opacity: 1;
-}
-.v-field--error:not(.v-field--disabled) .v-label.v-field-label {
-  color: rgb(var(--v-theme-error));
-}
-.v-label.v-field-label--floating {
-  --v-field-label-scale: 0.75em;
-  font-size: var(--v-field-label-scale);
-  visibility: hidden;
-  max-width: 100%;
-}
-.v-field--center-affix .v-label.v-field-label--floating {
-  transform: none;
-}
-.v-field.v-field--active .v-label.v-field-label--floating {
-  visibility: unset;
-}
-.v-input--density-default .v-field--variant-solo .v-label.v-field-label--floating, .v-input--density-default .v-field--variant-solo-inverted .v-label.v-field-label--floating, .v-input--density-default .v-field--variant-filled .v-label.v-field-label--floating, .v-input--density-default .v-field--variant-solo-filled .v-label.v-field-label--floating {
-  top: 7px;
-}
-
-.v-input--density-comfortable .v-field--variant-solo .v-label.v-field-label--floating, .v-input--density-comfortable .v-field--variant-solo-inverted .v-label.v-field-label--floating, .v-input--density-comfortable .v-field--variant-filled .v-label.v-field-label--floating, .v-input--density-comfortable .v-field--variant-solo-filled .v-label.v-field-label--floating {
-  top: 5px;
-}
-
-.v-input--density-compact .v-field--variant-solo .v-label.v-field-label--floating, .v-input--density-compact .v-field--variant-solo-inverted .v-label.v-field-label--floating, .v-input--density-compact .v-field--variant-filled .v-label.v-field-label--floating, .v-input--density-compact .v-field--variant-solo-filled .v-label.v-field-label--floating {
-  top: 3px;
-}
-
-.v-field--variant-plain .v-label.v-field-label--floating, .v-field--variant-underlined .v-label.v-field-label--floating {
-  transform: translateY(-16px);
-  margin: 0;
-  top: var(--v-input-padding-top);
-}
-.v-field--variant-outlined .v-label.v-field-label--floating {
-  transform: translateY(-50%);
-  transform-origin: center;
-  position: static;
-  margin: 0 4px;
-}
-
-/* endregion */
-/* region OUTLINE */
-.v-field__outline {
-  --v-field-border-width: 1px;
-  --v-field-border-opacity: 0.38;
-  align-items: stretch;
-  contain: layout;
-  display: flex;
-  height: 100%;
-  left: 0;
-  pointer-events: none;
-  position: absolute;
-  right: 0;
-  width: 100%;
-}
-@media (hover: hover) {
-  .v-field:hover .v-field__outline {
-    --v-field-border-opacity: var(--v-high-emphasis-opacity);
-  }
-}
-.v-field--error:not(.v-field--disabled) .v-field__outline {
-  color: rgb(var(--v-theme-error));
-}
-.v-field.v-field--focused .v-field__outline, .v-input.v-input--error .v-field__outline {
-  --v-field-border-opacity: 1;
-}
-.v-field--variant-outlined.v-field--focused .v-field__outline {
-  --v-field-border-width: 2px;
-}
-.v-field--variant-filled .v-field__outline::before, .v-field--variant-underlined .v-field__outline::before {
-  border-color: currentColor;
-  border-style: solid;
-  border-width: 0 0 var(--v-field-border-width);
-  opacity: var(--v-field-border-opacity);
-  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-.v-field--variant-filled .v-field__outline::before, .v-field--variant-underlined .v-field__outline::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-.v-field--variant-filled .v-field__outline::after, .v-field--variant-underlined .v-field__outline::after {
-  border-color: currentColor;
-  border-style: solid;
-  border-width: 0 0 2px;
-  transform: scaleX(0);
-  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-}
-.v-field--variant-filled .v-field__outline::after, .v-field--variant-underlined .v-field__outline::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-.v-field--focused.v-field--variant-filled .v-field__outline::after, .v-field--focused.v-field--variant-underlined .v-field__outline::after {
-  transform: scaleX(1);
-}
-
-.v-field--variant-outlined .v-field__outline {
-  border-radius: inherit;
-}
-.v-field--variant-outlined .v-field__outline__start, .v-field--variant-outlined .v-field__outline__notch::before, .v-field--variant-outlined .v-field__outline__notch::after, .v-field--variant-outlined .v-field__outline__end {
-  border: 0 solid currentColor;
-  opacity: var(--v-field-border-opacity);
-  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-.v-field--variant-outlined .v-field__outline__start {
-  flex: 0 0 12px;
-  border-top-width: var(--v-field-border-width);
-  border-bottom-width: var(--v-field-border-width);
-  border-inline-start-width: var(--v-field-border-width);
-  border-start-start-radius: inherit;
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
-  border-end-start-radius: inherit;
-}
-.v-field--rounded.v-field--variant-outlined .v-field__outline__start,
-[class^=rounded-].v-field--variant-outlined .v-field__outline__start,
-[class*=" rounded-"].v-field--variant-outlined .v-field__outline__start {
-  flex-basis: calc(var(--v-input-control-height) / 2 + 2px);
-}
-
-.v-field--reverse.v-field--variant-outlined .v-field__outline__start {
-  border-start-start-radius: 0;
-  border-start-end-radius: inherit;
-  border-end-end-radius: inherit;
-  border-end-start-radius: 0;
-  border-inline-end-width: var(--v-field-border-width);
-  border-inline-start-width: 0;
-}
-
-.v-field--variant-outlined .v-field__outline__notch {
-  flex: none;
-  position: relative;
-  max-width: calc(100% - 12px);
-}
-.v-field--variant-outlined .v-field__outline__notch::before, .v-field--variant-outlined .v-field__outline__notch::after {
-  opacity: var(--v-field-border-opacity);
-  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-.v-field--variant-outlined .v-field__outline__notch::before, .v-field--variant-outlined .v-field__outline__notch::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-.v-field--variant-outlined .v-field__outline__notch::before {
-  border-width: var(--v-field-border-width) 0 0;
-}
-.v-field--variant-outlined .v-field__outline__notch::after {
-  bottom: 0;
-  border-width: 0 0 var(--v-field-border-width);
-}
-.v-field--active.v-field--variant-outlined .v-field__outline__notch::before {
-  opacity: 0;
-}
-
-.v-field--variant-outlined .v-field__outline__end {
-  flex: 1;
-  border-top-width: var(--v-field-border-width);
-  border-bottom-width: var(--v-field-border-width);
-  border-inline-end-width: var(--v-field-border-width);
-  border-start-start-radius: 0;
-  border-start-end-radius: inherit;
-  border-end-end-radius: inherit;
-  border-end-start-radius: 0;
-}
-.v-field--reverse.v-field--variant-outlined .v-field__outline__end {
-  border-start-start-radius: inherit;
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
-  border-end-start-radius: inherit;
-  border-inline-end-width: 0;
-  border-inline-start-width: var(--v-field-border-width);
-}
-
-/* endregion */
-/* region LOADER */
-.v-field__loader {
-  top: calc(100% - 2px);
-  left: 0;
-  position: absolute;
-  right: 0;
-  width: 100%;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-  border-bottom-left-radius: inherit;
-  border-bottom-right-radius: inherit;
-  overflow: hidden;
-}
-.v-field--variant-outlined .v-field__loader {
-  top: calc(100% - 3px);
-  width: calc(100% - 1px * 2);
-  left: 1px;
-}
-
-/* endregion */
-/* region OVERLAY */
-.v-field__overlay {
-  border-radius: inherit;
-  pointer-events: none;
-}
-.v-field__overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.v-field--variant-filled .v-field__overlay {
-  background-color: currentColor;
-  opacity: 0.04;
-  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-.v-field--variant-filled.v-field--has-background .v-field__overlay {
-  opacity: 0;
-}
-@media (hover: hover) {
-  .v-field--variant-filled:hover .v-field__overlay {
-    opacity: calc((0.04 + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
-  }
-}
-.v-field--variant-filled.v-field--focused .v-field__overlay {
-  opacity: calc((0.04 + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
-}
-
-.v-field--variant-solo-filled .v-field__overlay {
-  background-color: currentColor;
-  opacity: 0.04;
-  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-@media (hover: hover) {
-  .v-field--variant-solo-filled:hover .v-field__overlay {
-    opacity: calc((0.04 + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
-  }
-}
-.v-field--variant-solo-filled.v-field--focused .v-field__overlay {
-  opacity: calc((0.04 + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
-}
-
-.v-field--variant-solo-inverted .v-field__overlay {
-  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-.v-field--variant-solo-inverted.v-field--has-background .v-field__overlay {
-  opacity: 0;
-}
-@media (hover: hover) {
-  .v-field--variant-solo-inverted:hover .v-field__overlay {
-    opacity: calc((0.04 + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
-  }
-}
-.v-field--variant-solo-inverted.v-field--focused .v-field__overlay {
-  background-color: rgb(var(--v-theme-surface-variant));
-  opacity: 1;
-}
-
-/* endregion */
-/* region MODIFIERS */
-.v-field--reverse .v-field__field,
-.v-field--reverse .v-field__input,
-.v-field--reverse .v-field__outline {
-  flex-direction: row-reverse;
-}
-.v-field--reverse .v-field__input, .v-field--reverse input {
-  text-align: end;
-}
-
-.v-input--disabled .v-field--variant-filled .v-field__outline::before,
-.v-input--disabled .v-field--variant-underlined .v-field__outline::before {
-  border-image: repeating-linear-gradient(to right, rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) 0px, rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) 2px, transparent 2px, transparent 4px) 1 repeat;
-}
-
-.v-field--loading .v-field__outline::after,
-.v-field--loading .v-field__outline::before {
-  opacity: 0;
-}
-
-/* endregion */
+  /* endregion */
+  /* region MODIFIERS */
+  .v-field--reverse .v-field__field,
+  .v-field--reverse .v-field__input,
+  .v-field--reverse .v-field__outline {
+    flex-direction: row-reverse;
+  }
+  .v-field--reverse .v-field__input, .v-field--reverse input {
+    text-align: end;
+  }
+  .v-input--disabled .v-field--variant-filled .v-field__outline::before,
+  .v-input--disabled .v-field--variant-underlined .v-field__outline::before {
+    border-image: repeating-linear-gradient(to right, rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) 0px, rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) 2px, transparent 2px, transparent 4px) 1 repeat;
+  }
+  .v-field--loading .v-field__outline::after,
+  .v-field--loading .v-field__outline::before {
+    opacity: 0;
+  }
+  /* endregion */
+}