@reference "tailwindcss";
input.tvu-input,
select.tvu-input,
textarea.tvu-input {
  @apply rounded p-2 border-2 border-gray-200;
}

.tvu-jdoc__field-input.tvu-input[type=radiogroup] label,
.tvu-jdoc__field-input.tvu-input[type=checkboxgroup] label {
  @apply ml-2;
}

textarea.tvu-input {
  min-height: 10rem;
}

button.tvu-button {
  @apply inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400;
}

button.tvu-button.tvu-button--red {
  @apply bg-red-500 hover:bg-red-600 focus:ring-red-400;
}

button.tvu-button.tvu-button--green {
  @apply bg-green-500 hover:bg-green-600 focus:ring-green-400;
}

button.tvu-button.tvu-button--yellow {
  @apply bg-yellow-500 hover:bg-yellow-600 focus:ring-yellow-400;
}

/*empty*/
.tvu-jse.tvu-jse--layout-default {
  display: flex;
  gap: 1rem;
}

.tvu-jse__properties {
  min-width: 16rem;
}
.tvu-jse__properties .tvu-jse__property {
  @apply p-2;
}
.tvu-jse__properties .tvu-jse__property.tvu-jse__property--active {
  @apply bg-gray-200 border-r-2 border-red-500;
}
.tvu-jse__properties .tvu-jse__property.tvu-jse__property--highlight {
  @apply bg-gray-100 border-r-2 border-red-500;
}
.tvu-jse__properties .tvu-jse__property__actions > div {
  @apply flex flex-row gap-2 mt-1;
}
.tvu-jse__properties .tvu-jse__property__actions > div button {
  @apply border border-blue-500 rounded-md text-blue-500 bg-white px-2;
}

.tvu-jse__property-fields {
  min-width: 16rem;
  @apply bg-white flex flex-col gap-y-2;
}
.tvu-jse__property-fields .tvu-jse__field input,
.tvu-jse__property-fields .tvu-jse__field select,
.tvu-jse__property-fields .tvu-jse__field textarea {
  min-width: 1rem;
  @apply w-full;
}
.tvu-jse__property-fields .tvu-jse__field input:disabled,
.tvu-jse__property-fields .tvu-jse__field select:disabled,
.tvu-jse__property-fields .tvu-jse__field textarea:disabled {
  @apply bg-gray-100;
}
.tvu-jse__property-fields .tvu-jse__checkbox {
  @apply flex flex-row gap-2;
}
.tvu-jse__property-fields .tvu-jse__upload {
  @apply flex flex-col gap-2;
}
.tvu-jse__property-fields .tvu-jse__file-attrs {
  @apply grid grid-cols-1 gap-y-4;
}
.tvu-jse__property-fields .tvu-jse__field--json textarea.tvu-input {
  min-height: 12rem;
}
.tvu-jse__property-fields .tvu-jse__form__actions {
  @apply flex flex-row;
}
.tvu-jse__property-fields .tvu-jse__form__actions button {
  @apply w-full;
}
.tvu-jse__property-fields .tvu-jse__enum-config {
  @apply flex flex-col gap-y-4;
}
.tvu-jse__property-fields .tvu-jse__enum-config .tvu-jse__enum-groups {
  @apply flex flex-col gap-y-2;
}
.tvu-jse__property-fields .tvu-jse__enum-config .tvu-jse__enum-groups .tvu-jse__enum-group {
  @apply flex flex-col gap-y-2;
}
.tvu-jse__property-fields .tvu-jse__enum-config .tvu-jse__enum-options {
  @apply flex flex-col gap-y-2;
}
.tvu-jse__property-fields .tvu-jse__enum-config .tvu-jse__enum-options .tvu-jse__enum-option {
  @apply flex flex-col gap-y-2;
}

.tvu-jse__dependencies {
  @apply flex flex-col gap-y-4;
}
.tvu-jse__dependencies .tvu-jse__dependencies__rule-group {
  @apply flex flex-col gap-y-2;
}
.tvu-jse__dependencies .tvu-jse__dependencies__rule {
  @apply flex flex-col gap-y-2;
}
.tvu-jse__dependencies .tvu-jse__dependencies__rule-group-actions {
  @apply flex flex-row gap-x-2;
}

.tvu-jse__event-config {
  @apply flex flex-col gap-y-2;
}