@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .hsl-input {
    @apply block w-full rounded-sm border-0 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300
    placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-uw-blue sm:text-sm/6
  }

  .hsl-label {
    @apply block text-sm/6 font-medium text-gray-900 capitalize
  }

  .hsl-link {
    @apply underline decoration-inherit md:no-underline md:hover:underline text-uw-blue md:transition md:duration-150 md:ease-in
  }

  .hsl-button {
    @apply py-2 px-4 rounded-sm bg-uw-blue border-2 border-uw-blue text-white hover:bg-white hover:text-uw-blue transition delay-150 duration-300 text-center capitalize cursor-pointer shadow-uw-grey shadow-md
  }

  .hsl-button-cancel {
    @apply py-2 px-4 rounded-sm bg-white border-2 border-uw-red text-uw-red transition delay-150 duration-300 text-center capitalize cursor-pointer shadow-uw-grey shadow-md
  }

  .hsl-button-danger {
    @apply py-2 px-4 rounded-sm bg-uw-red border-2 border-uw-red text-white hover:bg-white hover:text-uw-red transition delay-150 duration-300 text-center capitalize cursor-pointer shadow-uw-grey shadow-md
  }
}