@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

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

@layer base {  
  html {
    @apply h-full;
    scrollbar-color: #55727d transparent;
  }
  body {
    @apply font-sans bg-white h-full;
  }
  h1, h2, h3, h4, h5, h6 {
    @apply font-sans text-gray-900;
  }
  ::-webkit-scrollbar { @apply w-3 bg-transparent}
  ::-webkit-scrollbar-thumb {
    @apply rounded-lg bg-clip-padding border-2 border-transparent border-solid;
    background-color: #55727d;

    &:hover { background-color: #345664 }
  }
}

@layer components {
  /* Flash messages */
  .alert {
    @apply
    z-50
    absolute top-0 right-0 
    p-4 
    m-4
    text-sm
    text-gray-800
    rounded-lg
    bg-gray-50
    dark:bg-gray-800
    dark:text-gray-300
  }

  .alert.alert-danger,
  .alert.alert-alert {
    @apply
    text-red-800
    bg-red-50
    border border-red-800
    dark:bg-red-800
    dark:text-red-400
  }

  .alert.alert-success {
    @apply
    text-primary-800
    bg-primary-50
    border border-primary-800
    dark:bg-primary-800
    dark:text-primary-400
  }

  .alert.alert-notice {
    @apply
    text-blue-800
    bg-secondary-50
    border border-blue-800
    dark:bg-secondary-800
    dark:text-blue-400
  }

  .nav-link {
    @apply flex items-center p-2 w-full text-base font-medium text-gray-900 rounded-lg transition duration-75 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700
  }
  .nav-link svg {
    @apply mr-3 
  }
  .nav-link.is-current-page {
    @apply bg-gray-100 dark:text-white dark:bg-gray-700
  }


  /* Buttons */
  .btn {
    @apply
    inline-flex
    text-center
    items-center
    justify-center
    rounded-md
    bg-primary-600
    cursor-pointer
    h-10
    px-5
    py-2
    text-sm
    font-medium
    text-white
    shadow-sm
    ring-1
    ring-inset
    ring-primary-500
    hover:bg-primary-700
    hover:no-underline
    focus:outline-none
    focus:ring-2
    focus:ring-primary-700
    focus:ring-offset-2
    transition-colors;
  }

  .btn-outline {
    @apply
    bg-white
    text-neutral-500
    ring-neutral-200
    hover:text-white;
  }

  .btn.btn-secondary {
    @apply
    bg-secondary
    ring-secondary-200
    hover:bg-secondary-300
    focus:ring-secondary-500;
  }

  .btn-tertiary {
    @apply bg-tertiary ring-tertiary-100
    hover:bg-tertiary-600 focus:ring-tertiary-500;
  }

  /* Forms */

  .form-input,
  .form-select {
    @apply
    bg-gray-50 
    border 
    border-gray-300 
    text-gray-900
    text-sm
    rounded-lg
    focus:ring-primary-500
    focus:border-primary-500
    block
    w-full
    p-2.5
    mt-2
  }

  .form-label {
    @apply
    block
    text-sm
    font-medium
    text-gray-900
    dark:text-white
  }

  .form-radio {
    @apply
    h-4
    w-4
    rounded-full
    border-gray-300
    text-primary-600
    focus:ring-0
  }

  .form-toggle-wrapper {
    @apply cursor-pointer;
    
    input{ @apply hidden h-0 w-0 }

    label.toggle-button {
      @apply cursor-pointer w-10 h-6 bg-neutral-300 rounded-full relative transition-all;
    
      &:after {
        @apply content-[''] absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-all;
      }
    }
    
    input:checked + label.toggle-button {
      @apply bg-primary-500;
    
      &:after {
        left: calc(100% - 4px);
        transform: translateX(-100%);
      }
    }
  }

  /* We need to specify input and type of range to make sure we're overriding original styles */
  input[type="range"].form-range {
    @apply appearance-none w-full h-2 bg-transparent cursor-pointer;
  }
  
  /* WebKit (Chrome, Safari) */
  input[type="range"].form-range::-webkit-slider-runnable-track {
    @apply h-2 rounded-full bg-gray-200;
    /* the --val var will be controlled by javascript */
    background: linear-gradient(to right, #2da39c var(--val), #e5e7eb var(--val));
  }
  
  input[type="range"].form-range::-webkit-slider-thumb {
    @apply appearance-none bg-white rounded-full -mt-[7px] w-[22px] h-[22px] border border-solid border-gray-200 cursor-pointer;
  }
  
  /* Firefox */
  input[type="range"].form-range::-moz-range-track {
    @apply h-2 rounded-full bg-gray-200;
  }
  
  input[type="range"].form-range::-moz-range-progress {
    @apply h-2 rounded-full bg-primary;
  }
  
  input[type="range"].form-range::-moz-range-thumb {
    @apply w-[22px] h-[22px] bg-white border border-solid border-gray-200 rounded-full cursor-pointer;
  }

  .cursor-grab { cursor: grab !important; }
}
/*
 * 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.
 *


 */