@vuecs/forms 4.0.0

package/dist/style.css

@@ -0,0 +1,791 @@
+.vc-form-checkbox-wrapper {
+  align-items: center;
+  gap: .5rem;
+  display: inline-flex;
+}
+
+.vc-form-checkbox-label {
+  cursor: pointer;
+  user-select: none;
+  color: var(--vc-color-fg, #111827);
+  font-size: .875rem;
+  line-height: 1.25;
+}
+
+.vc-form-checkbox {
+  -webkit-appearance: none;
+  appearance: none;
+  box-sizing: border-box;
+  border: 1px solid var(--vc-color-border, #d1d5db);
+  border-radius: var(--vc-radius-sm, .125rem);
+  background-color: var(--vc-color-bg, #fff);
+  cursor: pointer;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  width: 1rem;
+  height: 1rem;
+  padding: 0;
+  transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
+  display: inline-flex;
+}
+
+.vc-form-checkbox:hover {
+  border-color: var(--vc-color-primary-500, #3b82f6);
+}
+
+.vc-form-checkbox:focus-visible {
+  outline: 2px solid var(--vc-color-primary-500, #3b82f6);
+  outline-offset: 2px;
+}
+
+.vc-form-checkbox[data-state="checked"], .vc-form-checkbox[data-state="indeterminate"] {
+  background-color: var(--vc-color-primary-600, #2563eb) !important;
+  border-color: var(--vc-color-primary-600, #2563eb) !important;
+}
+
+.vc-form-checkbox[data-disabled], .vc-form-checkbox:disabled {
+  cursor: not-allowed;
+  opacity: .5;
+}
+
+.vc-form-checkbox-sm {
+  width: .75rem;
+  height: .75rem;
+}
+
+.vc-form-checkbox-sm .vc-form-checkbox-indicator:before {
+  width: .5rem;
+  height: .5rem;
+}
+
+.vc-form-checkbox-lg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.vc-form-checkbox-lg .vc-form-checkbox-indicator:before {
+  width: .875rem;
+  height: .875rem;
+}
+
+.vc-form-checkbox-indicator {
+  width: 100%;
+  height: 100%;
+  color: var(--vc-color-on-primary, #fff);
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+.vc-form-checkbox[data-state="checked"] .vc-form-checkbox-indicator:before, .vc-form-checkbox[data-state="indeterminate"] .vc-form-checkbox-indicator:before {
+  content: "";
+  background-color: currentColor;
+  width: .75rem;
+  height: .75rem;
+  display: block;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+}
+
+.vc-form-checkbox[data-state="checked"] .vc-form-checkbox-indicator:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
+}
+
+.vc-form-checkbox[data-state="indeterminate"] .vc-form-checkbox-indicator:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='7' width='10' height='2' rx='1' fill='black'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='7' width='10' height='2' rx='1' fill='black'/%3E%3C/svg%3E");
+}
+.vc-form-checkbox-group {
+  flex-direction: column;
+  gap: .5rem;
+  display: flex;
+}
+
+.vc-form-checkbox-group[data-orientation="horizontal"] {
+  flex-direction: row;
+  align-items: center;
+}
+.vc-form-input-group > .vc-form-input {
+  box-shadow: none;
+  flex: auto;
+  min-width: 0;
+}
+
+.vc-form-input-group > .vc-form-input:not(:first-child) {
+  border-left: 0;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.vc-form-input-group > .vc-form-input:not(:last-child) {
+  border-right: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.vc-form-input-group > .vc-form-input:focus, .vc-form-input-group > .vc-form-input:focus-visible {
+  border-color: var(--vc-color-border, #d1d5db);
+  box-shadow: none;
+  outline: 0;
+}
+.vc-form-number {
+  border: 1px solid var(--vc-color-border, #d1d5db);
+  border-radius: var(--vc-radius-md, .375rem);
+  background-color: var(--vc-color-bg, #fff);
+  align-self: flex-start;
+  align-items: stretch;
+  width: fit-content;
+  display: inline-flex;
+  overflow: hidden;
+}
+
+.vc-form-number:focus-within {
+  border-color: var(--vc-color-primary-500, #3b82f6);
+  box-shadow: 0 0 0 1px var(--vc-color-primary-500, #3b82f6);
+}
+
+.vc-form-number-input {
+  -webkit-appearance: none;
+  appearance: none;
+  box-sizing: border-box;
+  color: var(--vc-color-fg, #111827);
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+  field-sizing: content;
+  background-color: #0000;
+  border: 0;
+  outline: none;
+  min-width: 4rem;
+  padding: .5rem .75rem;
+  font-size: .875rem;
+}
+
+.vc-form-number-input::-webkit-outer-spin-button, .vc-form-number-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.vc-form-number-input[type="number"] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
+.vc-form-number-decrement, .vc-form-number-increment {
+  -webkit-appearance: none;
+  appearance: none;
+  box-sizing: border-box;
+  width: 2rem;
+  color: var(--vc-color-fg, #111827);
+  background-color: var(--vc-color-bg-muted, #f3f4f6);
+  cursor: pointer;
+  border: 0;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  font-size: 1rem;
+  transition: background-color .15s ease-in-out;
+  display: inline-flex;
+}
+
+.vc-form-number-decrement:hover, .vc-form-number-increment:hover {
+  background-color: var(--vc-color-bg-elevated, #e5e7eb);
+}
+
+.vc-form-number-decrement:focus-visible, .vc-form-number-increment:focus-visible {
+  outline: 2px solid var(--vc-color-primary-500, #3b82f6);
+  outline-offset: -2px;
+}
+
+.vc-form-number-decrement:disabled, .vc-form-number-decrement[data-disabled], .vc-form-number-increment:disabled, .vc-form-number-increment[data-disabled] {
+  cursor: not-allowed;
+  opacity: .5;
+}
+.vc-form-pin {
+  align-items: center;
+  gap: .5rem;
+  display: inline-flex;
+}
+
+.vc-form-pin-input {
+  -webkit-appearance: none;
+  appearance: none;
+  box-sizing: border-box;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+  width: 2.5rem;
+  height: 2.5rem;
+  color: var(--vc-color-fg, #111827);
+  background-color: var(--vc-color-bg, #fff);
+  border: 1px solid var(--vc-color-border, #d1d5db);
+  border-radius: var(--vc-radius-md, .375rem);
+  padding: 0;
+  font-size: 1.125rem;
+  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+}
+
+.vc-form-pin-input:focus {
+  border-color: var(--vc-color-primary-500, #3b82f6);
+  box-shadow: 0 0 0 1px var(--vc-color-primary-500, #3b82f6);
+  outline: none;
+}
+
+.vc-form-pin-input:disabled, .vc-form-pin-input[data-disabled] {
+  cursor: not-allowed;
+  opacity: .5;
+}
+.vc-form-radio-group {
+  flex-direction: column;
+  gap: .5rem;
+  display: flex;
+}
+
+.vc-form-radio-group[data-orientation="horizontal"] {
+  flex-direction: row;
+  align-items: center;
+}
+
+.vc-form-radio-wrapper {
+  align-items: center;
+  gap: .5rem;
+  display: inline-flex;
+}
+
+.vc-form-radio-label {
+  cursor: pointer;
+  user-select: none;
+  color: var(--vc-color-fg, #111827);
+  font-size: .875rem;
+  line-height: 1.25;
+}
+
+.vc-form-radio {
+  -webkit-appearance: none;
+  appearance: none;
+  box-sizing: border-box;
+  border: 1px solid var(--vc-color-border, #d1d5db);
+  background-color: var(--vc-color-bg, #fff);
+  cursor: pointer;
+  border-radius: 9999px;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+  padding: 0;
+  transition: border-color .15s ease-in-out;
+  display: inline-block;
+  position: relative;
+}
+
+.vc-form-radio:hover {
+  border-color: var(--vc-color-primary-500, #3b82f6);
+}
+
+.vc-form-radio:focus-visible {
+  outline: 2px solid var(--vc-color-primary-500, #3b82f6);
+  outline-offset: 2px;
+}
+
+.vc-form-radio[data-state="checked"] {
+  border-color: var(--vc-color-primary-600, #2563eb) !important;
+}
+
+.vc-form-radio[data-disabled], .vc-form-radio:disabled {
+  cursor: not-allowed;
+  opacity: .5;
+}
+
+.vc-form-radio-indicator {
+  background-color: var(--vc-color-primary-600, #2563eb);
+  border-radius: 9999px;
+  width: .5rem;
+  height: .5rem;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.vc-form-radio-sm {
+  width: .75rem;
+  height: .75rem;
+}
+
+.vc-form-radio-sm .vc-form-radio-indicator {
+  width: .375rem;
+  height: .375rem;
+}
+
+.vc-form-radio-lg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.vc-form-radio-lg .vc-form-radio-indicator {
+  width: .625rem;
+  height: .625rem;
+}
+.vc-form-select-trigger {
+  box-sizing: border-box;
+  border: 1px solid var(--vc-color-border, #d1d5db);
+  border-radius: var(--vc-radius-md, .375rem);
+  background-color: var(--vc-color-bg, #fff);
+  width: 100%;
+  color: var(--vc-color-fg, #111827);
+  cursor: pointer;
+  text-align: left;
+  -webkit-appearance: none;
+  appearance: none;
+  justify-content: space-between;
+  align-items: center;
+  gap: .5rem;
+  padding: .375rem .625rem;
+  font-size: .875rem;
+  line-height: 1.25rem;
+  display: inline-flex;
+}
+
+.vc-form-select-trigger:focus-visible {
+  outline: 2px solid var(--vc-color-primary-500, #3b82f6);
+  outline-offset: 1px;
+}
+
+.vc-form-select-trigger[data-disabled] {
+  cursor: not-allowed;
+  opacity: .5;
+}
+
+.vc-form-select-trigger[data-placeholder] .vc-form-select-value {
+  color: var(--vc-color-fg-muted, #6b7280);
+}
+
+.vc-form-select-value {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.vc-form-select-icon {
+  color: var(--vc-color-fg-muted, #6b7280);
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+.vc-form-select-content {
+  z-index: 50;
+  min-width: var(--reka-select-trigger-width);
+  max-height: var(--reka-select-content-available-height, 18rem);
+  border: 1px solid var(--vc-color-border, #d1d5db);
+  border-radius: var(--vc-radius-md, .375rem);
+  background-color: var(--vc-color-bg, #fff);
+  color: var(--vc-color-fg, #111827);
+  overflow: hidden;
+  box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
+}
+
+.vc-form-select-viewport {
+  padding: .25rem;
+}
+
+.vc-form-select-item {
+  border-radius: var(--vc-radius-sm, .125rem);
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  align-items: center;
+  gap: .5rem;
+  padding: .375rem .625rem .375rem 1.75rem;
+  font-size: .875rem;
+  line-height: 1.25rem;
+  display: flex;
+  position: relative;
+}
+
+.vc-form-select-item[data-highlighted] {
+  background-color: var(--vc-color-bg-muted, #f3f4f6);
+}
+
+.vc-form-select-item[data-disabled] {
+  cursor: not-allowed;
+  opacity: .5;
+  pointer-events: none;
+}
+
+.vc-form-select-item-indicator {
+  width: 1rem;
+  height: 1rem;
+  color: var(--vc-color-primary-600, #2563eb);
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+  position: absolute;
+  left: .375rem;
+}
+
+.vc-form-select-group-label {
+  color: var(--vc-color-fg-muted, #6b7280);
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  padding: .375rem .625rem;
+  font-size: .75rem;
+  font-weight: 600;
+  display: block;
+}
+
+.vc-form-select-separator {
+  background-color: var(--vc-color-border, #d1d5db);
+  height: 1px;
+  margin: .25rem 0;
+}
+
+.vc-form-select-trigger-sm {
+  padding: .25rem .5rem;
+  font-size: .75rem;
+  line-height: 1rem;
+}
+
+.vc-form-select-trigger-lg {
+  padding: .5rem .875rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.vc-form-select-search {
+  display: block;
+  position: relative;
+}
+
+.vc-form-select-search .vc-form-select-search-input {
+  width: 100%;
+  color: var(--vc-color-fg, #111827);
+  background-color: var(--vc-color-bg, #fff);
+  border: 1px solid var(--vc-color-border, #d1d5db);
+  border-radius: var(--vc-radius-md, .375rem);
+  cursor: pointer;
+  appearance: none;
+  padding: .5rem .75rem;
+  font-size: .875rem;
+  line-height: 1.25rem;
+  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+  display: block;
+  box-shadow: 0 1px 2px #0000000d;
+}
+
+.vc-form-select-search .vc-form-select-search-input:focus {
+  border-color: var(--vc-color-primary-500, #3b82f6);
+  box-shadow: 0 0 0 1px var(--vc-color-primary-500, #3b82f6);
+  outline: 0;
+}
+
+.vc-form-select-search .vc-form-select-search-input:disabled {
+  cursor: not-allowed;
+  background-color: var(--vc-color-bg-muted, #f9fafb);
+  opacity: 1;
+}
+
+.vc-form-select-search .vc-form-select-search-content {
+  inset-inline: 0;
+  z-index: 50;
+  background-color: var(--vc-color-bg, #fff);
+  border: 1px solid var(--vc-color-border, #d1d5db);
+  border-radius: var(--vc-radius-md, .375rem);
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  max-height: 15rem;
+  display: block;
+  position: absolute;
+  top: calc(100% + .25rem);
+  overflow-y: auto;
+  box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
+}
+
+.vc-form-select-search .vc-form-select-search-content::-webkit-scrollbar {
+  display: none;
+}
+
+.vc-form-select-search .vc-form-select-search-item {
+  color: var(--vc-color-fg, #111827);
+  cursor: pointer;
+  padding: .5rem .75rem;
+  font-size: .875rem;
+  line-height: 1.25rem;
+  display: block;
+}
+
+.vc-form-select-search .vc-form-select-search-item:hover, .vc-form-select-search .vc-form-select-search-item.current {
+  background-color: var(--vc-color-bg-elevated, #f3f4f6);
+}
+
+.vc-form-select-search .vc-form-select-search-item.active {
+  background-color: var(--vc-color-bg-elevated, #f3f4f6);
+  color: var(--vc-color-fg, #111827);
+  font-weight: 600;
+}
+
+.vc-form-select-search .vc-form-select-search-selected {
+  flex-wrap: wrap;
+  gap: .25rem;
+  margin-top: .5rem;
+  display: flex;
+}
+
+.vc-form-select-search .vc-form-select-search-selected-item {
+  color: var(--vc-color-fg, #111827);
+  background-color: var(--vc-color-bg-muted, #f3f4f6);
+  border: 1px solid var(--vc-color-border, #d1d5db);
+  border-radius: var(--vc-radius-sm, .125rem);
+  cursor: pointer;
+  appearance: none;
+  align-items: center;
+  gap: .25rem;
+  padding: .125rem .5rem;
+  font-size: .75rem;
+  line-height: 1rem;
+  display: inline-flex;
+}
+
+.vc-form-select-search .vc-form-select-search-selected-item:hover {
+  background-color: var(--vc-color-bg-elevated, #e5e7eb);
+}
+
+.vc-form-select-search .vc-form-select-search-selected-item-remove {
+  color: var(--vc-color-fg-muted, #6b7280);
+  font-weight: 600;
+  line-height: 1;
+}
+.vc-form-slider {
+  user-select: none;
+  touch-action: none;
+  align-items: center;
+  width: 100%;
+  height: 1.25rem;
+  display: flex;
+  position: relative;
+}
+
+.vc-form-slider[data-orientation="vertical"] {
+  flex-direction: column;
+  width: 1.25rem;
+  height: 8rem;
+}
+
+.vc-form-slider-track {
+  background-color: var(--vc-color-bg-muted, #f3f4f6);
+  border-radius: 9999px;
+  flex-grow: 1;
+  height: .25rem;
+  position: relative;
+}
+
+.vc-form-slider[data-orientation="vertical"] .vc-form-slider-track {
+  width: .25rem;
+  height: 100%;
+}
+
+.vc-form-slider-range {
+  background-color: var(--vc-color-primary-600, #2563eb);
+  border-radius: 9999px;
+  height: 100%;
+  position: absolute;
+}
+
+.vc-form-slider[data-orientation="vertical"] .vc-form-slider-range {
+  width: 100%;
+}
+
+.vc-form-slider-thumb {
+  background-color: var(--vc-color-bg, #fff);
+  border: 2px solid var(--vc-color-primary-600, #2563eb);
+  cursor: pointer;
+  border-radius: 9999px;
+  width: 1rem;
+  height: 1rem;
+  transition: box-shadow .15s ease-in-out;
+  display: block;
+  box-shadow: 0 1px 2px #0000001a;
+}
+
+.vc-form-slider-thumb:hover {
+  box-shadow: 0 2px 4px #00000026;
+}
+
+.vc-form-slider-thumb:focus-visible {
+  outline: 2px solid var(--vc-color-primary-500, #3b82f6);
+  outline-offset: 2px;
+}
+
+.vc-form-slider[data-disabled] .vc-form-slider-thumb {
+  cursor: not-allowed;
+  opacity: .5;
+}
+.vc-form-switch-wrapper {
+  align-items: center;
+  gap: .5rem;
+  display: inline-flex;
+}
+
+.vc-form-switch-label {
+  cursor: pointer;
+  user-select: none;
+  color: var(--vc-color-fg, #111827);
+  font-size: .875rem;
+  line-height: 1.25;
+}
+
+.vc-form-switch {
+  -webkit-appearance: none;
+  appearance: none;
+  box-sizing: border-box;
+  border: 1px solid var(--vc-color-border, #d1d5db);
+  background-color: var(--vc-color-bg-muted, #f3f4f6);
+  cursor: pointer;
+  border-radius: 9999px;
+  flex-shrink: 0;
+  align-items: center;
+  width: 2.25rem;
+  height: 1.25rem;
+  padding: .125rem;
+  transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
+  display: inline-flex;
+}
+
+.vc-form-switch:hover {
+  border-color: var(--vc-color-primary-500, #3b82f6);
+}
+
+.vc-form-switch:focus-visible {
+  outline: 2px solid var(--vc-color-primary-500, #3b82f6);
+  outline-offset: 2px;
+}
+
+.vc-form-switch[data-state="checked"] {
+  background-color: var(--vc-color-primary-600, #2563eb) !important;
+  border-color: var(--vc-color-primary-600, #2563eb) !important;
+}
+
+.vc-form-switch[data-disabled], .vc-form-switch:disabled {
+  cursor: not-allowed;
+  opacity: .5;
+}
+
+.vc-form-switch-thumb {
+  background-color: var(--vc-color-bg, #fff);
+  will-change: translate;
+  border-radius: 9999px;
+  width: .875rem;
+  height: .875rem;
+  transition: translate .18s ease-in-out;
+  display: block;
+  translate: 0;
+  box-shadow: 0 1px 2px #0000001a;
+}
+
+.vc-form-switch[data-state="checked"] .vc-form-switch-thumb {
+  translate: 1rem;
+}
+
+.vc-form-switch-sm {
+  width: 1.75rem;
+  height: 1rem;
+}
+
+.vc-form-switch-sm .vc-form-switch-thumb {
+  width: .625rem;
+  height: .625rem;
+}
+
+.vc-form-switch-sm[data-state="checked"] .vc-form-switch-thumb {
+  translate: .75rem;
+}
+
+.vc-form-switch-lg {
+  width: 2.75rem;
+  height: 1.5rem;
+}
+
+.vc-form-switch-lg .vc-form-switch-thumb {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.vc-form-switch-lg[data-state="checked"] .vc-form-switch-thumb {
+  translate: 1.25rem;
+}
+.vc-form-tags {
+  border: 1px solid var(--vc-color-border, #d1d5db);
+  border-radius: var(--vc-radius-md, .375rem);
+  background-color: var(--vc-color-bg, #fff);
+  cursor: text;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: .375rem;
+  min-height: 2.5rem;
+  padding: .375rem .5rem;
+  display: flex;
+}
+
+.vc-form-tags:focus-within {
+  border-color: var(--vc-color-primary-500, #3b82f6);
+  box-shadow: 0 0 0 1px var(--vc-color-primary-500, #3b82f6);
+}
+
+.vc-form-tags[data-disabled] {
+  cursor: not-allowed;
+  opacity: .6;
+  background-color: var(--vc-color-bg-muted, #f3f4f6);
+}
+
+.vc-form-tags-item {
+  color: var(--vc-color-on-primary, #fff);
+  background-color: var(--vc-color-primary-600, #2563eb);
+  border-radius: 9999px;
+  align-items: center;
+  gap: .25rem;
+  padding: .125rem .5rem;
+  font-size: .75rem;
+  line-height: 1.25;
+  display: inline-flex;
+}
+
+.vc-form-tags-item-text {
+  user-select: none;
+}
+
+.vc-form-tags-item-delete {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 1rem;
+  height: 1rem;
+  color: inherit;
+  cursor: pointer;
+  background-color: #0000;
+  border: 0;
+  border-radius: 9999px;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  line-height: 1;
+  display: inline-flex;
+}
+
+.vc-form-tags-item-delete:hover {
+  background-color: #0000001a;
+}
+
+.vc-form-tags-input {
+  -webkit-appearance: none;
+  appearance: none;
+  min-width: 6rem;
+  color: var(--vc-color-fg, #111827);
+  background-color: #0000;
+  border: 0;
+  outline: none;
+  flex: 1 0 6rem;
+  padding: .125rem 0;
+  font-size: .875rem;
+}