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

@layer components {
  .pagination span {
    @apply py-2 px-3 border border-gray-300;
  }
  .pagination span.first,
  .pagination span.prev,
  .pagination span.page,
  .pagination span.next,
  .pagination span.last {
    @apply leading-tight text-gray-500 bg-white hover:bg-gray-100 hover:text-gray-700;
  }
  .pagination span.first {
    @apply ml-0 rounded-l-lg;
  }
  .pagination span.current {
    @apply text-blue-600 bg-blue-50 hover:bg-blue-100 hover:text-blue-700;
  }
  .pagination span.last {
    @apply rounded-r-lg;
  }

  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
  .container {
    @apply w-full px-5 py-10 mt-10 bg-white rounded-lg shadow;
  }
  .pagenate-container {
    @apply px-5 bg-white py-5 flex flex-col items-center;
  }

  table {
    @apply min-w-full leading-normal;
  }
  th {
    @apply px-5 py-3 bg-white border-b border-gray-200 text-gray-800 text-left text-sm uppercase font-normal;
  }
  td {
    @apply px-5 py-5 border-b border-gray-200 bg-white text-sm;
  }
  .table th:first-child {
    position: static !important;
  }

  label {
    @apply text-gray-700;
  }

  .form-field input,
  .form-field select {
    @apply w-full text-gray-700 py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm h-10;
  }
  .form-field {
    @apply flex flex-row w-full;
  }
  .accordion-content {
    /* daisyUI の .menu > li > ul { display: none; position: absolute } を上書き */
    display: flex !important;
    flex-direction: column;
    position: static !important;
    max-height: 500px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out;
  }

  .accordion-collapsed {
    max-height: 0 !important;
    opacity: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

input.search__input {
  @apply pl-10;
}

.toggle-checkbox:checked {
  @apply: right-0 border-green-400;
  right: 0;
  border-color: #68d391;
}
.toggle-checkbox:checked + .toggle-label {
  @apply: bg-green-400;
  background-color: #68d391;
}

.switch {
  position: relative;
  display: inline-block;
  width: 45px;
  height: 25px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 19px;
  width: 19px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #68d391;
}

input:checked + .slider:before {
  transform: translateX(20px);
}

.slider.round {
  border-radius: 25px;
}

.slider.round:before {
  border-radius: 50%;
}

.text-medium-green {
  color: #248640;
}
/* 矢印アイコンの回転（サーバーサイドで初期状態を設定、CSSホバーとJSクリックで制御） */
.accordion-item .fa-chevron-right {
  transition: transform 0.2s ease-in-out;
}
.rotate-90 {
  transform: rotate(90deg);
}
/*
 * 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.
 *


 */