@layer components {
    .yst-root {
        .yst-file-input {
			@apply
			yst-w-full
			yst-px-6
			yst-pt-5
			yst-pb-6
			yst-border-2
			yst-border-dashed
			yst-rounded-md
			yst-text-center
			yst-transition-all
			yst-ease-out
			yst-duration-300
			yst-bg-white
			yst-border-slate-300;

			&.yst-is-drag-over {
				@apply yst-bg-primary-50 yst-border-primary-300;

				.yst-file-input__content {
					@apply yst-pointer-events-none;
				}

				.yst-file-input__icon {
					@apply -yst-translate-y-2 yst-text-primary-400;
				}
			}

			&.yst-is-disabled {
				@apply yst-opacity-50 yst-cursor-not-allowed;

				.yst-file-input__select-label {
					@apply yst-cursor-not-allowed;
				}
			}
		}

		.yst-file-input__content {
			@apply
			yst-max-w-xs
			yst-inline-flex
			yst-flex-col
			yst-space-y-1
			yst-items-center
			yst-text-center;
		}

		.yst-file-input__icon {
			@apply
			yst-mx-auto
			yst-h-12
			yst-w-12
			yst-text-slate-400
			yst-stroke-1
			yst-transition-all
			yst-ease-out
			yst-duration-300
			yst-transform;

			> path {
				stroke-width: 1;
			}
		}

		.yst-file-input__input {
			@apply yst-sr-only;

			&:focus + .yst-file-input__select-label {
				@apply yst-outline-none yst-ring-2 yst-ring-offset-2 yst-ring-primary-500;
			}
		}

		.yst-file-input__labels {
			@apply yst-inline-block yst-font-normal yst-text-slate-800;
		}

		.yst-file-input__select-label {
			@apply yst-rounded-md yst-font-medium;
		}
    }

	[dir=rtl] .yst-root .yst-file-input__labels {
		@apply yst-flex-row-reverse;
	}
}
