/* https://github.com/supabase/ui/blob/develop/src/lib/Layout/FormLayout/FormLayout.module.css */

.sbui-formlayout {
  @apply grid gap-2;
}

.sbui-formlayout--flex {
  @apply flex justify-between;
}

.sbui-formlayout--flex-right div:last-child {
  text-align: right;
}

.sbui-formlayout--flex-left div:first-child {
  order: 2;
}

.sbui-formlayout--flex-left div:last-child {
  order: 1;
}

.sbui-formlayout--non-responsive {
  @apply grid grid-cols-12 gap-4;
}

.sbui-formlayout--responsive {
  @apply md:grid md:grid-cols-12 md:gap-4;
}

.sbui-formlayout__label-container-horizontal {
  @apply justify-between col-span-12;
}

.sbui-formlayout__label-container-vertical {
  @apply col-span-4;
}

.sbui-formlayout__content-container-horizontal {
  @apply col-span-12;
}

.sbui-formlayout__content-container-vertical {
  @apply col-span-8;
}

.sbui-formlayout__content-container-vertical--align-right {
  @apply text-right;
}

.sbui-formlayout__label {
  @apply block text-sm text-input-label-light dark:text-input-label-dark;
}

.sbui-formlayout__label-opt {
  @apply text-sm text-gray-400 dark:text-gray-300;
}

.sbui-formlayout__error {
  @apply mt-2 text-sm text-red-500;
}

.sbui-formlayout__description {
  @apply mt-2 text-sm text-gray-400 dark:text-gray-300;
}

/* .sbui-formlayout__content-container--width-25 {
  width:
} */

/*
  Layout sizes
*/

.sbui-formlayout--tiny .sbui-formlayout__label,
.sbui-formlayout--tiny .sbui-formlayout__label-opt,
.sbui-formlayout--tiny .sbui-formlayout__error,
.sbui-formlayout--tiny .sbui-formlayout__description {
  @apply text-xs;
}
.sbui-formlayout--small .sbui-formlayout__label,
.sbui-formlayout--small .sbui-formlayout__label-opt,
.sbui-formlayout--small .sbui-formlayout__error,
.sbui-formlayout--small .sbui-formlayout__description {
  @apply text-sm leading-4;
}
.sbui-formlayout--medium .sbui-formlayout__label,
.sbui-formlayout--medium .sbui-formlayout__label-opt,
.sbui-formlayout--medium .sbui-formlayout__error,
.sbui-formlayout--medium .sbui-formlayout__description {
  @apply text-sm;
}
.sbui-formlayout--large .sbui-formlayout__label,
.sbui-formlayout--large .sbui-formlayout__label-opt,
.sbui-formlayout--large .sbui-formlayout__error,
.sbui-formlayout--large .sbui-formlayout__description {
  @apply text-base;
}
.sbui-formlayout--xlarge .sbui-formlayout__label,
.sbui-formlayout--xlarge .sbui-formlayout__label-opt,
.sbui-formlayout--xlarge .sbui-formlayout__error,
.sbui-formlayout--xlarge .sbui-formlayout__description {
  @apply text-base;
}