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



@layer components {

  .btn-link {
    @apply inline-flex items-center rounded-md px-4 py-2 text-sm font-medium self-center
      bg-blue-100
      hover:bg-blue-200 hover:text-indigo-900
      transition-colors duration-200;
  }

  .link-back {
    @apply text-indigo-600 hover:text-indigo-900;
  }

  .btn-cancel {
    @apply inline-flex items-center rounded-md px-4 py-2 text-sm font-medium self-center
      text-gray-600 bg-gray-100
      hover:bg-gray-200
      transition-colors duration-200;
  }

  .btn-submit {
    @apply inline-flex items-center rounded-md px-4 py-2 text-sm font-medium self-center
      text-white bg-indigo-600
      hover:bg-indigo-500
      transition-colors duration-200
      focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2;
  }

  .btn-action {
    @apply inline-flex items-center rounded-full px-4 py-2 text-sm font-medium self-center
      text-white bg-blue-500
      hover:bg-blue-400
      transition-colors duration-200
      focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2;
  }


  /* required属性を持つ入力フィールドに必須マークを表示 */
  label:has(+ input[required])::after,
  label:has(+ textarea[required])::after,
  label:has(+ select[required])::after {
    content: '必須';
    margin-left: 0.25rem;
    font-size: 0.75rem;
    color: theme('colors.red.500');
    background-color: theme('colors.red.100');
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
  }



}