@layer components {
  /* Start Form Styles */
  .ti-form-input {
    @apply py-3 px-4 border border-gray-200 block w-full rounded-sm text-sm focus:border-gray-200 focus:ring-transparent focus:shadow-sm dark:shadow-white/10 dark:bg-bgdark dark:border-white/10 dark:focus:border-white/10 dark:text-white/70 dark:placeholder:text-white/50;
  }

  .ti-form-checkbox {
    @apply shrink-0 border-gray-200 rounded-sm text-primary focus:ring-primary dark:bg-bgdark dark:border-white/10 dark:checked:bg-primary dark:checked:border-primary dark:focus:ring-offset-white/10;
  }

  .ti-form-radio {
    @apply shrink-0 mt-0.5 border-gray-300 rounded-full text-primary focus:ring-primary dark:bg-bgdark dark:border-white/10 dark:checked:bg-primary dark:checked:border-primary dark:focus:ring-offset-white/10;
  }

  .ti-switch {
    @apply relative w-[3.25rem] h-7 bg-gray-200 checked:bg-none checked:bg-primary border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 ring-0 ring-transparent focus:border-primary focus:ring-transparent ring-offset-white focus:outline-0 appearance-none dark:bg-black/20 dark:checked:bg-primary dark:focus:ring-offset-white/10 before:inline-block before:w-6 before:h-6 before:bg-white checked:before:bg-white before:translate-x-0 ltr:checked:before:translate-x-full rtl:checked:before:-translate-x-full before:shadow before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-black/20 dark:checked:before:bg-black/20;
  }

  .ti-form-select {
    @apply py-3 px-4 ltr:pr-9 rtl:pl-9 block w-full border-gray-200 rounded-sm text-sm focus:border-primary focus:ring-primary dark:bg-bgdark dark:border-white/10 dark:text-white/70;
  }

  .ti-form-select-label {
    @apply block text-sm font-medium mb-2 dark:text-white;
  }

  .ti-form-label {
    @apply block text-sm font-medium mb-2 dark:text-white;
  }

  [type="checkbox"]:checked:hover,
  [type="checkbox"]:checked:focus,
  [type="radio"]:checked:hover,
  [type="radio"]:checked:focus {
    @apply bg-primary;
  }

  /* End Form Styles */

  /* Start Dropzone Styles */
  .dropzone {
    @apply border border-gray-200 dark:border-white/10 rounded-sm #{!important};
  }

  .dropzone .dz-preview {
    @apply m-0 #{!important};
  }

  .dropzone .dz-message .dz-button {
    @apply text-xl #{!important};
  }
  .dropzone .dz-preview .dz-success-mark,
  .dropzone .dz-preview .dz-error-mark {
    @apply z-10 #{!important};
  }

  /* End Dropzone Styles */

  /* Start Filepond Styles */
  .filepond--credits {
    @apply hidden;
  }

  .filepond--drop-label.filepond--drop-label label {
    @apply dark:text-white;
  }

  .filepond--panel-root {
    @apply bg-transparent border border-dashed border-gray-200 dark:border-white/10 rounded-sm #{!important};
  }
  .filepond.circular-filepond {
    .filepond--panel-root {
      @apply rounded-full #{!important};
    }
  }

  .circular-filepond.filepond--root[data-style-panel-layout~="circle"]
    .filepond--file
    [data-align*="left"] {
    @apply left-[40%];
  }

  .circular-filepond.filepond--root[data-style-panel-layout~="circle"] {
    @apply w-32 h-32 my-0 mx-auto #{!important};
  }

  .filepond--root {
    @apply mb-0 #{!important};
  }

  /* End Filepond Styles */

  /*Color Picker*/
  .pickr .pcr-button {
    @apply overflow-hidden rounded-sm #{!important};
  }
  .pcr-app {
    @apply rounded-sm z-[9999999999] #{!important};
  }
  /*Color Picker*/
}
