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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

html, body {
  font-family: "Inter var", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.slim-container {
  @apply w-full max-w-screen-lg px-4 md:px-6 my-6 mx-auto;
}

h1 {@apply text-4xl tracking-tight dark:text-white;}
h2 {@apply text-3xl tracking-tight dark:text-white;}
h3 {@apply text-2xl tracking-tight dark:text-white;}
h4 {@apply text-xl dark:text-white;}
h5 {@apply text-lg dark:text-white;}
h6 {@apply text-base dark:text-white;}

a {
  @apply text-blue-500 hover:text-blue-400 transition-all ease-in-out cursor-pointer;
}


.flipper {
  @apply border-blue-700 relative;


  &::before {
    content: 'Future Feature';
    @apply bg-blue-50 border border-blue-700 text-blue-700 text-[10px] uppercase font-semibold tracking-widest -top-2.5 left-2 rounded-full px-3 py-0.5 absolute;
  }
}

.player_overlay {
  @apply h-full w-36 -right-32;
  position: absolute;
  bottom: 0;
  -webkit-transform: skew(-25deg);
  -ms-transform: skew(-25deg);
  transform: skew(-25deg);
  
}
.pagination nav {
  @apply flex justify-center w-full max-w-[500px] mx-auto text-center my-3;

  span {
    @apply p-1 grow;
  }

  .active {
    @apply bg-blue-400 rounded text-white;
  } 

  > .active  {
    @apply bg-blue-500;
  }
}

.slide {
  right: -400px;
  -webkit-animation: slide 0.05s forwards;
  -webkit-animation-delay: 0.05s;
  animation: slide 0.05s forwards;
  animation-delay: 0.05s;
}

@-webkit-keyframes slide {
  100% { 
    right: 0; 
  }
}

@keyframes slide {
  100% { 
    right: 0; 
  }
}

.hero {
  min-height: 70dvh;
  display: flex;
  flex-direction: column;
  background-image: url(/assets/background-73e2ffbdce4d1a9bab79074407bad4c3c8d50bf706be6e23379650dd2cfee099.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;

  &:after {
    content: '';
    position: fixed;
    height: 100px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    @apply bg-gradient-to-t from-black to-transparent;
  }

  @apply text-center;

  div:first-child {
    @apply flex-grow flex flex-col justify-center items-center;
  }

  h1 {
    line-height: 1;
    @apply font-bold;
    font-size: 7vw;
  }
}


legend {
  @apply inline-block text-base font-semibold text-gray-900 hover:text-gray-800 mb-1;
}

.field {
  @apply block w-full mb-3;
}

label {
  @apply inline-block text-sm font-semibold text-gray-700 hover:text-slate-700 mb-3;
}

input[type="file"], input[type="password"], input[type="text"], input[type="email"], input[type="number"], input[type="tel"], input[type="url"], input[type="search"], input[type="password"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="color"], input[type="range"], input[type="reset"], select {
  font-size: 16px;
  @apply block w-full;
  @apply rounded px-3 py-2 transition-all ease-in-out no-underline border border-gray-300; 
  @apply placeholder:text-gray-300;

  &:disabled {
    @apply bg-slate-200 text-gray-400;
  }

  &.input-sm {
    @apply rounded text-sm px-2 py-0.5 transition-all ease-in-out no-underline border border-gray-300 !important; 
  }
}


textarea {
  @apply block w-full;
  @apply rounded px-3 py-2 transition-all ease-in-out no-underline border border-gray-300; 
  @apply placeholder:text-gray-300;
}

input[type="checkbox"], input[type="radio"] {
  @apply p-2 border border-gray-300 rounded mr-1;
}


/* Buttons */

.button-base {
  @apply text-nowrap inline-block text-xs md:text-[14px] font-semibold rounded-lg transition-all duration-300 ease-in-out border drop-shadow-[0_2px_1px_rgba(0,0,0,0.05)] hover:drop-shadow-[0_0px_1px_rgba(0,0,0,0.05)];
}

.button-normal {
  @apply px-3 py-3;
}

.button-small {
  @apply px-2 py-1;
}

.button-mini {
  @apply px-2 py-0 leading-4 text-[9px] uppercase;
}

.with-icon {
  @apply flex items-center justify-center gap-1;
}

.button-primary {
  @apply button-base button-normal text-white bg-blue-700 hover:bg-blue-600 hover:text-white border-transparent;

  &.danger {
    @apply bg-red-600 hover:bg-red-700 border-red-600 !important;
  }

  &:disabled {
    @apply bg-neutral-100 hover:bg-neutral-100 text-neutral-400 border-neutral-200 cursor-not-allowed !important;
    @apply dark:bg-neutral-900 dark:text-neutral-600 dark:border-neutral-600 cursor-not-allowed !important;
  }

  &:has(svg) {
    @apply with-icon;
  }
}

.button-primary-sm {
  @apply button-base button-small text-white bg-blue-500 hover:bg-blue-600 border-transparent;

  &.danger {
    @apply bg-red-600 hover:bg-red-700 border-red-600 !important;
  }

  &:disabled {
    @apply bg-neutral-100 hover:bg-neutral-100 text-neutral-400 border-neutral-200 cursor-not-allowed !important;
    @apply dark:bg-neutral-900 dark:text-neutral-600 dark:border-neutral-600 cursor-not-allowed !important;
  }

  &:has(svg) {
    @apply with-icon;
  }
}

.button-secondary {
  @apply button-base button-normal text-blue-700 hover:text-blue-500 bg-white hover:bg-slate-100;
  @apply dark:text-blue-400 dark:hover:text-blue-400 dark:bg-transparent dark:border-blue-500 dark:hover:bg-blue-900/50;
  
  &.danger {
    @apply button-base button-normal text-red-700 hover:text-red-600 border-red-600 hover:bg-red-100 border-red-600;
    @apply dark:text-red-500 dark:hover:text-red-400 dark:bg-transparent dark:border-red-500 dark:hover:bg-red-900/50;
  }

  &:disabled {
    @apply bg-neutral-100 text-neutral-400 cursor-not-allowed;
    @apply dark:text-neutral-500 dark:hover:text-neutral-400 dark:bg-transparent dark:border-neutral-500 dark:hover:bg-neutral-900/50;
  }

  &:has(svg) {
    @apply with-icon;
  }
}


.button-secondary-sm {
  @apply button-base button-small text-blue-700 hover:text-blue-600 bg-white hover:bg-neutral-100;
  @apply dark:text-blue-500 dark:hover:text-blue-400 dark:bg-transparent dark:border-blue-500 dark:hover:bg-blue-900/50;
  
  &.danger {
    @apply button-base button-small text-red-700 hover:text-red-600 border-red-600 hover:bg-red-100 border-red-600;
    @apply dark:text-red-500 dark:hover:text-red-400 dark:bg-transparent dark:border-red-500 dark:hover:bg-red-900/50;
  }

  &:disabled {
    @apply bg-neutral-100 text-neutral-400 cursor-not-allowed;
    @apply dark:text-neutral-500 dark:hover:text-neutral-400 dark:bg-transparent dark:border-neutral-500 dark:hover:bg-neutral-900/50;
  }

  &:has(svg) {
    @apply with-icon;
  }
}

.button-secondary-mini {
  @apply button-base button-mini text-blue-700 hover:text-blue-600 bg-white hover:bg-neutral-100;
  @apply dark:text-blue-500 dark:hover:text-blue-400 dark:bg-transparent dark:border-blue-500 dark:hover:bg-blue-900/50;
  
  &.danger {
    @apply button-base button-mini text-red-700 hover:text-red-600 border-red-600 hover:bg-red-100 border-red-600;
    @apply dark:text-red-500 dark:hover:text-red-400 dark:bg-transparent dark:border-red-500 dark:hover:bg-red-900/50;
  }

  &:disabled {
    @apply bg-neutral-100 text-neutral-400 cursor-not-allowed;
    @apply dark:text-neutral-500 dark:hover:text-neutral-400 dark:bg-transparent dark:border-neutral-500 dark:hover:bg-neutral-900/50;
  }

  &:has(svg) {
    @apply with-icon;
  }
}

.radio-group {
  @apply isolate inline-flex rounded-md;

  label {
    @apply button-base button-normal text-slate-500 hover:bg-slate-100 hover:border-slate-300 hover:z-20 rounded-none ;
    @apply dark:text-white dark:hover:text-white dark:bg-transparent dark:border-blue-500 dark:hover:bg-blue-900/50;
    @apply inline-flex items-center focus:z-10 rounded-none !important;

    &:before {
      content: '';
      @apply pr-1 h-2 w-2 bg-slate-300 rounded-full mr-2;
    }
    
    &:not(:first-child) {
      @apply -ml-px;
    }

    &:first-child {
      @apply rounded-l-md !important;
    }

    &:last-child {
      @apply rounded-r-md !important;
    }
    
    &:has(input:checked) {
      @apply text-slate-950 bg-slate-100 border-slate-300 dark:border-blue-500 dark:bg-blue-600/80 dark:text-white z-10 !important;

      &:before {
        content: '';
        @apply pr-1 h-2 w-2 bg-blue-500 rounded-full mr-2;
      }
    }
  }
}

.button-group {
  @apply isolate inline-flex rounded-md;

  button, label, .button-secondary {
    @apply button-base button-normal text-slate-600 hover:bg-slate-100 hover:border-slate-300 hover:z-20 rounded-none ;
    @apply dark:text-white dark:hover:text-white dark:bg-transparent dark:border-blue-500 dark:hover:bg-blue-900/50;
    @apply inline-flex items-center focus:z-10 rounded-none !important;
    
    &:before, &:after {
      content: '';
      @apply h-4 w-4 mr-1;
    }

    &:not(:first-child) {
      @apply -ml-px;
    }

    &:first-child {
      @apply rounded-l-md !important;
    }

    &:last-child {
      @apply rounded-r-md !important;
    }

    &.active {
      @apply bg-slate-100 text-blue-700 border-slate-300 dark:border-blue-500 dark:bg-blue-600/80 dark:text-white z-10 !important;

      &:before {
        content: '✓';
        @apply pr-2;
      }
    }

    &:has(input:checked) {
      @apply bg-slate-100 text-blue-700 border-slate-300 dark:border-blue-500 dark:bg-blue-600/80 dark:text-white z-10 !important;

      &:before {
        content: '✓';
      }
    }
  }

  > .data-only {
    @apply bg-neutral-100 text-neutral-600 dark:bg-blue-900/50 dark:text-neutral-400;
  }

}


/* Badge concepts */
/* https://tailwindui.com/components/application-ui/elements/badges#component-007ef3476f2ffe8bda7f37965d6ee434 */

.badge {
  @apply inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset;
}

.badge-primary {
  @apply badge;
  @apply bg-neutral-50 text-neutral-600 ring-neutral-500/10;

  &.red {
    @apply bg-red-50 text-red-700 ring-red-700/10;
  }

  &.yellow {
    @apply bg-yellow-50 text-yellow-700 ring-yellow-700/10;
  }

  &.green {
    @apply bg-green-50 text-green-700 ring-green-700/10;
  }

  &.blue {
    @apply bg-blue-50 text-blue-700 ring-blue-700/10;
  }

  &.indigo {
    @apply bg-indigo-50 text-indigo-700 ring-indigo-700/10;
  }

  &.purple {
    @apply bg-purple-50 text-purple-700 ring-purple-700/10;
  }

  &.pink {
    @apply bg-pink-50 text-pink-700 ring-pink-700/10;
  }
}

.badge-dot {
  @apply badge;
  @apply text-neutral-600 ring-neutral-500/30 gap-x-1.5 text-xs;
  @apply dark:text-white dark:ring-neutral-700 dark:fill-white/80 gap-x-1.5 text-xs;

  svg {
    @apply size-1.5;
  }

  &.red {
    @apply fill-red-500;
  }

  &.yellow {
    @apply fill-yellow-500;
  }

  &.green {
    @apply fill-green-500;
  }

  &.blue {
    @apply fill-blue-500;
  }

  &.indigo {
    @apply fill-indigo-500;
  }

  &.purple {
    @apply fill-purple-500;
  }

  &.pink {
    @apply fill-pink-500;
  }
}

.pill {
  @apply inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ring-1 ring-inset;
}

.pill-primary {
  @apply pill;
  @apply bg-neutral-500/10 text-neutral-600 ring-neutral-500/30;

  &.red {
    @apply bg-red-500/10 text-red-700 ring-red-700/30;
  }

  &.yellow {
    @apply bg-yellow-500/10 text-yellow-700 ring-yellow-700/30;
  }

  &.green {
    @apply bg-green-500/10 text-green-700 ring-green-700/30;
  }

  &.blue {
    @apply bg-blue-500/10 text-blue-700 ring-blue-700/30;
  }

  &.indigo {
    @apply bg-indigo-500/10 text-indigo-700 ring-indigo-700/30;
  }

  &.purple {
    @apply bg-purple-500/10 text-purple-700 ring-purple-700/30;
  }

  &.pink {
    @apply bg-pink-500/10 text-pink-700 ring-pink-700/30;
  }

  &.orange {
    @apply bg-orange-500/10 text-orange-700 ring-orange-700/30;
  }
}

.badge-secondary {
  @apply badge border border-neutral-400 text-neutral-600;
}

.badge-dive {
  @apply badge border;
}

.notification-base {
  @apply py-2 px-4 rounded text-center absolute top-2 right-2;
}

.notification-success {
  @apply notification-base border-green-800 bg-green-700 text-green-50 opacity-90;
  animation: slide-in-right 0.3s forwards, fade-out 0.3s forwards 5s;
}

.notification-failure {
  @apply notification-base border-red-200 bg-red-50 text-red-500;
  animation: slide-in-right 0.3s forwards, fade-out 0.3s forwards 5s;
}

@keyframes slide-in-right {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 0.9;
  }
}

@keyframes fade-out {
  from {
    opacity: 0.9;
  }
  to {
    opacity: 0;
  }
}
/*
 * 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.
 *


 */