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

@layer base {
  /*
    各ボタンの共通部分です。.button-base-flatとほぼ同じ装飾を持ちます。
    このクラスにはテキスト色等の装飾がないため、HTMLで使わないでください。
    代わりに下記のボタン用クラスを利用することを検討してください。
    * .button-flat (目立たないボタン)
    * .button-secondary (通常のボタン)
    * .button-destroy (破壊的なボタン)
  */
  .button-base {
    @apply block w-full px-2 py-1 bg-zinc-100 text-sm text-center font-bold border border-zinc-100 rounded drop-shadow-interface-init hover:bg-zinc-100 hover:drop-shadow-interface transition duration-250 disabled:opacity-50 disabled:pointer-events-none;
  }
}

@layer components {
  /*
    「戻る」などあまり目立たないボタンです。
    目立たなくするため、baseクラスのbg-color、font-weight、borderを上書きします。
  */
  .button-flat {
    @apply button-base bg-white font-normal border-none text-inherit hover:border-blue-600 hover:text-blue-600;
  }
  /*
    通常のボタンです。
  */
  .button-secondary {
    @apply button-base text-blue-600 hover:border-blue-600 hover:text-blue-600;
  }
  /*
    破壊的なボタンです。
    削除など、データを破壊する可能性のあるもので使われます。
  */
  .button-destroy {
    @apply button-base text-red-600 hover:border-red-600 hover:text-red-600;
  }
}

@layer base {
  th, td {
    @apply px-3 py-2;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */