:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 221.2 83.2% 53.3%;
  --radius: 0.5rem;
  --chart-1: 12 76% 61%;
  --chart-2: 173 58% 39%;
  --chart-3: 197 37% 24%;
  --chart-4: 43 74% 66%;
  --chart-5: 27 87% 67%;
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;
  --popover: 222.2 84% 4.9%;
  --popover-foreground: 210 40% 98%;
  --primary: 217.2 91.2% 59.8%;
  --primary-foreground: 222.2 47.4% 11.2%;
  --secondary: 217.2 32.6% 17.5%;
  --secondary-foreground: 210 40% 98%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  --accent: 217.2 32.6% 17.5%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 224.3 76.3% 48%;
  --chart-1: 220 70% 50%;
  --chart-2: 160 60% 45%;
  --chart-3: 30 80% 55%;
  --chart-4: 280 65% 60%;
  --chart-5: 340 75% 55%;
}

.sheet-hide-close-btn > button {
  display: none !important;
}

.no-scrollbar {
  -ms-overflow-style: none !important; /* Internet Explorer 10+ */
  scrollbar-width: none !important; /* Firefox */
}

.no-scrollbar::-webkit-scrollbar {
  display: none !important; /* Safari and Chrome */
}

[role="treeitem"] {
  @apply focus-visible:!outline-0;
}

.rjsf input[type="color"] {
  @apply -mt-1 w-14 border-none p-0 !important;
}

.rjsf {
  @apply px-0;
}

.rjsf .form-group {
  @apply flex flex-col;
}

.rjsf .form-group label {
  @apply text-xs font-normal text-muted-foreground;
}
.rjsf .form-group select {
  @apply mt-1 flex w-full rounded-md border border-border bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50;
}
.rjsf .form-group input {
  @apply mt-1 flex w-full rounded-md border border-border bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50;
}
.rjsf .form-group > textarea {
  @apply no-scrollbar mt-1 flex w-full rounded-md border border-border bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50;
}
.rjsf > div > button[type="submit"] {
  @apply hidden;
}

.rjsf > .form-group > fieldset > * {
  @apply mb-2 border-none border-border pb-1 pt-1;
}

.rjsf .form-group > .checkbox > label > span {
  @apply mt-1;
}

.rjsf .form-group > .checkbox > label {
  @apply flex items-center gap-x-2;
}

.array-item-list .array-item {
  @apply relative rounded border px-2 pb-3 pt-2;
}

.field-array > legend {
  @apply hidden;
}

.field-object > fieldset > legend {
  @apply hidden;
}

.field-object > fieldset {
  @apply space-y-1;
}

[type="text"]:focus,
input:where(:not([type])):focus,
[type="email"]:focus,
[type="url"]:focus,
[type="password"]:focus,
[type="number"]:focus,
[type="date"]:focus,
[type="datetime-local"]:focus,
[type="month"]:focus,
[type="search"]:focus,
[type="tel"]:focus,
[type="time"]:focus,
[type="week"]:focus,
[multiple]:focus,
textarea:focus,
select:focus {
  @apply border-border outline-none ring-1 ring-transparent !important;
}

.rjsf [type="checkbox"] {
  @apply !w-6 !p-0;
}

.rjsf [type="checkbox"]:checked {
  @apply bg-primary;
}

/* ------------------------ Props Editor ------------------------ */

.array-item-list > :not([hidden]) ~ :not([hidden]) {
  margin-top: 15px;
}

.array-item-toolbox > .btn-group {
  @apply absolute -bottom-2.5 right-0 z-50 rounded border border-border;
}

.array-item-toolbox > .btn-group > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 0;
  --tw-divide-opacity: 1;
}

.array-item-toolbox > .btn-group {
  /* border-radius: 0.25rem;
  border-width: 1px; */
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  font-family:
    ui-serif,
    Georgia,
    Cambria,
    Times New Roman,
    Times,
    serif;
}

.array-item-toolbox > .btn-group > .btn {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  line-height: 1rem;
}

.array-item-toolbox > .btn-group > .btn:hover {
  @apply hover:bg-slate-100;
}

.btn.btn-danger.array-item-remove:before {
  font-size: 0.6rem;
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
  --tw-content: "✖";
  content: var(--tw-content);
}

.btn.btn-default.array-item-move-up:before {
  --tw-text-opacity: 1;
  --tw-content: "↑";
}

.btn.btn-default.array-item-move-down:before,
.btn.btn-default.array-item-move-up:before {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x))
    skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  color: rgb(17 24 39 / var(--tw-text-opacity));
  content: var(--tw-content);
}

.btn.btn-default.array-item-move-down:before {
  --tw-text-opacity: 1;
  --tw-content: "↓";
}
