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

@font-face { font-family: Montserrat; src:url(/assets/Montserrat-Regular.ttf); }
@font-face { font-family: Montserrat-Bold; src:url(/assets/Montserrat-Bold.ttf); }
@font-face { font-family: Montserrat-Extrabold; src:url(/assets/Montserrat-ExtraBold.ttf); }
@font-face { font-family: Montserrat-Semibold; src:url(/assets/Montserrat-SemiBold.ttf); }

@layer components {
  .overlay { @apply bg-[rgba(51,51,51,0.8)] absolute top-0 left-0 w-full h-full z-10; }
  .mobile_selected { @apply border-nutri-yellow text-nutri-black; }
  .mobile_no_selected { @apply text-nutri-gray; }
  .information_selected { @apply text-nutri-black border-nutri-yellow border-b-2; }
  .information_no_selected { @apply text-nutri-gray; }
  .information_mobile_selected { @apply text-nutri-black; }
  .information_mobile_no_selected { @apply text-nutri-gray; }

  .slider { display: flex; overflow: auto; scroll-snap-type: x mandatory; }
  .slider > .slide { min-width: 100%; scroll-snap-align: start; }

  .kigen-dashboard a { @apply text-blue-500 transition duration-200 ease-in-out; }
  .kigen-dashboard a:hover { @apply text-blue-600; }
  .kigen-dashboard .turbo-progress-bar { height: 5px; background-color: green; }

  .control { @apply appearance-none relative block w-full border border-gray-300 placeholder-gray-500 text-gray-900 transition duration-200 ease-in-out; }
  .control.control-lg { @apply px-3 py-3 text-lg; }
  .control:focus { @apply outline-none ring-2 z-10 ring-gray-400 border-gray-400; }
  .control.control-nutri:focus { @apply ring-yellow-400 border-yellow-400; }
  .control.control-success:focus { @apply ring-green-500 border-green-500; }

  .form-control { @apply block w-full min-w-0 sm:text-sm border border-gray-300 bg-white px-3 py-2 transition duration-200 ease-in-out; }
  .form-control:focus { @apply outline-none ring-2 ring-gray-400 border-gray-400; }
  .form-control.info:focus { @apply ring-yellow-400 border-yellow-400; }
  .form-control.error { @apply ring-2 ring-rose-500 border-rose-500; }
  .form-control.success { @apply ring-2 ring-green-500 border-green-500; }
  .form-select { @apply block w-full pl-3 pr-10 py-2 text-base border border-gray-300 sm:text-sm rounded-md bg-white; }
  .form-control-search { @apply block w-full h-full pl-8 pr-3 py-2 border-transparent text-blue-500 placeholder-gray-500 focus:outline-none focus:ring-0 focus:border-transparent sm:text-sm font-bold; }

  .dropdown { @apply origin-top-right absolute z-10 right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5; }
  .dropdown .item { @apply block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100; }

  .paginator { @apply relative z-0 inline-flex shadow-sm -space-x-px; }
  .paginator .button { @apply relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50; }
  .paginator .button.first { @apply rounded-l-md; }
  .paginator .button.last { @apply rounded-r-md; }

  .tabs .active { @apply transition duration-200 ease-in bg-blue-100 text-blue-700 px-3 py-2 font-medium text-sm rounded-md; }
  .tabs .inactive { @apply transition duration-200 ease-in text-gray-500 hover:text-gray-700 px-3 py-2 font-medium text-sm rounded-md; }

  .menu-dashboard .not_active { @apply transition text-gray-300 hover:bg-gray-700 hover:text-white text-sm flex items-center px-2 py-2 font-medium rounded-md; }
  .menu-dashboard .not_active svg { @apply transition text-gray-400 mr-3 h-6 w-6; }
  .menu-dashboard .not_active svg:hover { @apply text-gray-300; }
  .menu-dashboard .active { @apply bg-gray-900 text-white flex items-center px-2 py-2 text-sm font-medium rounded-md; }
  .menu-dashboard .active svg { @apply text-gray-300 mr-3 h-6 w-6; }
  .menu-dashboard .active svg:hover { @apply text-gray-200; }

  a { @apply text-yellow-500 transition duration-200 ease-in-out; }
  a:hover { @apply text-yellow-600; }

  .nutri-dashboard .menu-dashboard .not_active { @apply transition text-white hover:bg-yellow-400 hover:text-white text-sm flex items-center px-2 py-2 font-medium rounded-md; }
  .nutri-dashboard .menu-dashboard .not_active svg { @apply transition text-white mr-3 h-6 w-6; }
  .nutri-dashboard .menu-dashboard .not_active svg:hover { @apply text-white; }
  .nutri-dashboard .menu-dashboard .active { @apply bg-green-900 text-white flex items-center px-2 py-2 text-sm font-medium rounded-md; }
  .nutri-dashboard .menu-dashboard .active svg { @apply text-gray-300 mr-3 h-6 w-6; }
  .nutri-dashboard .menu-dashboard .active svg:hover { @apply text-gray-200; }

  .label { @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium capitalize; }
  .label.label-success { @apply bg-green-100 text-green-800; }
  .label.label-danger { @apply bg-rose-100 text-rose-800; }
  .label.label-warning { @apply bg-yellow-100 text-yellow-800; }

  .tooltip { @apply invisible absolute bg-black text-white text-xs rounded py-1 px-4 -mt-8; }
  .has-tooltip { @apply relative; }
  .has-tooltip:hover .tooltip { @apply visible z-50; }

  .switch { position: relative; width: 68px; height: 33px; border-radius: 9999px; }
  .switch .switch1, .switch .switch2, .switch .switch3 { position: absolute; z-index: 0; -webkit-appearance: none; }
  .switch .switch1 + label::after, .switch .switch2 + label::after, .switch .switch3 + label::after { position: absolute; content: ""; width: 25px; height: 25px; top: 0; left: 0; z-index: 10; }
  .switch .switch1 + label::after { left: 4px; }
  .switch .switch1:checked ~ .switch__inner { background-color: #F43F5E; border-radius: 9999px; transition: background-color 200ms ease-in-out; z-index: 9; }
  .switch .switch1:checked ~ .switch__inner::after { left: 4px; transition: left 200ms ease-in-out; }
  .switch .switch2 + label::after { left: 21px; }
  .switch .switch2:checked ~ .switch__inner { background-color: #FACC15; border-radius: 9999px; transition: background-color 200ms ease-in-out; z-index: 9; }
  .switch .switch2:checked ~ .switch__inner::after { left: 21px; transition: left 200ms ease-in-out; }
  .switch .switch3 + label::after { left: 39px; }
  .switch .switch3:checked ~ .switch__inner { background-color: #10B981; border-radius: 9999px; transition: background-color 200ms ease-in-out; z-index: 9; }
  .switch .switch3:checked ~ .switch__inner::after { left: 39px; transition: left 200ms ease-in-out; }
  .switch .switch__inner { border-radius: 9999px; width: 68px; height: 33px; background-color: #fff; border: solid 4px rgba(75,85,99,1); border-radius: 4px; z-index: 9; }
  .switch .switch__inner::after { position: absolute; display: block; content:""; width: 25px; height: 25px; border-radius: 50%; top: 4px; left: 4px; background-color: white; transition: left 200ms ease-in-out; z-index: 10; }

  .relative input[type="checkbox"]:checked ~ .dot { left: 39px; transition: left 200ms ease-in-out; }
  .relative input[type="checkbox"]:checked ~ .block { background-color: #10B981; transition: background-color 200ms ease-in-out; }
}

@layer components {
  .btn { @apply bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 transition duration-500 ease-in-out cursor-pointer; }
  .btn.btn-info { @apply border-transparent text-white bg-blue-600; }
  .btn.btn-danger { @apply border-transparent text-white bg-rose-600; }
  .btn.btn-black { @apply border-transparent text-white bg-gray-600; }
  .btn.btn-nutri-1 { @apply border-transparent text-white bg-yellow-400; }
  .btn.btn-nutri-yellow { @apply bg-nutri-yellow text-white font-montserrat text-xl px-10 py-3 rounded-none border-0; }

  .btn:focus { @apply outline-none ring-2 ring-offset-2 ring-gray-500; }
  .btn:focus.btn-info { @apply ring-blue-500; }
  .btn:focus.btn-danger { @apply ring-rose-500; }
  .btn:focus.btn-black { @apply ring-gray-500; }
  .btn:focus.btn-nutri-yellow { @apply bg-nutri-yellow text-nutri-gray; }

  .btn:hover { @apply bg-gray-50 text-gray-700; }
  .btn:hover.btn-info { @apply bg-blue-700 text-white; }
  .btn:hover.btn-danger { @apply bg-rose-700 text-white; }
  .btn:hover.btn-black { @apply bg-gray-700 text-white; }
  .btn:hover.btn-nutri-1 { @apply bg-yellow-500 text-white; }
  .btn:hover.btn-nutri-yellow { @apply bg-nutri-yellow text-nutri-gray; }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS 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/SCSS
 * 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.
 *


 */