.form {
  @apply flex flex-col gap-5 !text-base;

  & turbo-frame {
    @apply flex flex-col gap-5 !text-base;
  }
  & .field {
    @apply flex flex-col gap-2.5;

    & input:not([type="checkbox"]) {
      @apply w-full;
    }
    & input[disabled] {
      @apply  border-neutral-content ;
    }
  }

  & .actions { 
    @apply space-y-2
  }

  /* & input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]) {
    @apply w-full bg-form-bg text-white rounded-2xl px-4 py-2 placeholder:text-form-input;
  }

  & textarea {
    @apply w-full bg-form-bg text-white rounded-2xl px-4 py-2 placeholder:text-form-input;
  }

  & .input-like {
    @apply bg-form-bg text-white rounded-2xl px-4 py-2;
  }

  & .actions input[type="submit"] {
    @apply btn btn-primary w-full;
  }

  & .select {
    @apply bg-form-bg;
  } */
}

.input-like {
  @apply bg-form-bg text-white rounded-2xl px-4 py-2;
}

a .link {
  @apply duration-300 text-form-input hover:text-white;
}
.errors {
  @apply text-red-500 p-2;
}

.errors h2 {
  @apply text-lg font-bold;
}

.errors ul {
  @apply text-sm list-inside	 list-disc;
}

.link.active {
  @apply duration-300 text-form-input hover:text-white;
}

.layout-link {
  @apply btn btn-sm btn-soft btn-outline hover:btn-outline btn-primary;
}

.layout-link-active {
  @apply btn-active btn-primary;
}

.dropdown {
  & .link {
    @apply tracking-wide block whitespace-pre px-4 py-3 hover:bg-white/20;
  }
}

.header-link {
  @apply btn btn-ghost;

  & .active {
    @apply btn-active;
  }
}

.header {
  & .link {
    @apply btn btn-ghost;
  }

  & .active {
    @apply font-bold text-white;
  }
}

.pagy {
  @apply flex space-x-1 font-semibold text-sm text-base-content;
  a:not(.gap) {
    @apply block rounded-lg px-3 py-1  bg-base-200;
    &:hover {
      @apply bg-base-300;
    }
    &:not([href]) {
      /* disabled links */
      @apply text-base-content bg-base-content/20 cursor-not-allowed;
    }
    &.current {
      @apply text-base-content bg-base-200 border border-base-content cursor-default;
    }
  }
  label {
    @apply inline-block whitespace-nowrap bg-base-300 rounded-lg px-3 py-0.5;
    input {
      @apply bg-base-200 border-none rounded-md;
    }
  }
}

.order-fields {
  @apply flex flex-col sm:flex-row  sm:justify-between justify-start items-start sm:items-center gap-2;

  & span {
    @apply dark:bg-base-200  text-sm rounded-2xl px-4 py-2 w-full sm:bg-transparent sm:text-base-content sm:w-auto;
  }

  & label {
    @apply font-bold;
  }
}

input[type="checkbox"].toggle:checked {
  background-image: none !important;
}

.form-control {
  @apply space-y-1;
}
