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

/*

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

*/

body {
  @apply h-full min-h-screen;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

/* Ambient background gradient blobs */
.ambient-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.1;
  will-change: transform;
}

.ambient-blob--green {
  background: radial-gradient(circle, #22c55e, transparent 70%);
  bottom: -10%;
  right: -5%;
  animation: drift-green 25s ease-in-out infinite;
}

.ambient-blob--lime {
  background: radial-gradient(circle, #84cc16, transparent 70%);
  top: 10%;
  left: -8%;
  animation: drift-lime 30s ease-in-out infinite;
}

.ambient-blob--purple {
  background: radial-gradient(circle, #7c3aed, transparent 70%);
  bottom: 20%;
  left: 30%;
  animation: drift-purple 35s ease-in-out infinite;
}

@keyframes drift-green {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(-40px, -30px) scale(1.05); }
  50%      { transform: translate(-20px, -60px) scale(0.95); }
  75%      { transform: translate(30px, -20px) scale(1.02); }
}

@keyframes drift-lime {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(30px, 40px) scale(0.97); }
  50%      { transform: translate(50px, 20px) scale(1.04); }
  75%      { transform: translate(20px, -30px) scale(0.98); }
}

@keyframes drift-purple {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(-30px, 20px) scale(1.03); }
  50%      { transform: translate(20px, 40px) scale(0.96); }
  75%      { transform: translate(40px, -10px) scale(1.01); }
}

/* Hide number input spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

section {
  @apply mb-6;
}

p + p {
  @apply mt-3;
}

.bounce {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
a {
  @apply text-blue-500 hover:text-blue-300 transition-all ease-in-out underline;
}

.pulse {
  animation: pulse 10s infinite;
}

@keyframes pulse {
  0%, 20%, 50%, 80%, 100% {
    opacity: 20%;
  }
  50% {
    opacity: 80%;
  } 
  100% {
    opacity: 20%;
  }
}

.pulse2 {
  animation: pulse2 4s infinite;
}

@keyframes pulse2 {
  0%, 20%, 50%, 80%, 100% {
    opacity: 100%;
  }
  50% {
    opacity: 50%;
  } 
  100% {
    opacity: 100%;
  }
}

:where([autocomplete=one-time-code]) {
  --otp-digits: 6; /* length */
  --otc-ls: 2ch;
  --otc-gap: 1.25;
  /* private consts */
  --_otp-bgsz: calc(var(--otc-ls) + 1ch);

  all: unset;
  background: linear-gradient(90deg, 
    var(--otc-bg, #EEE) calc(var(--otc-gap) * var(--otc-ls)),
    transparent 0
  ) 0 0 / var(--_otp-bgsz) 100%;
  caret-color: var(--otc-cc, #333);
  clip-path: inset(0% calc(var(--otc-ls) / 2) 0% 0%);
  font-family: ui-monospace, monospace;
  font-size: var(--otc-fz, 2.5em);
  inline-size: calc(var(--otc-digits) * var(--_otp-bgsz));
  letter-spacing: var(--otc-ls);
  padding-block: var(--otc-pb, 1ch);
  padding-inline-start: calc(((var(--otc-ls) - 1ch) / 2) * var(--otc-gap));
}

.field {
  @apply mb-4;
}

label {
  @apply block text-sm text-white mb-2;
}

input[type="email"], input[type="textarea"], input[type="password"], input[type="text"], input[type="phone"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], input[type="month"], input[type="week"], input[type="range"], input[type="file"], input[type="image"], textarea {
  @apply text-sm text-white w-full px-3 py-1.5 bg-white/5 border-2 border-white/10 outline-lime-500 focus:ring-lime-500 focus:border-lime-500 rounded-none ring-1 ring-white/5 transition-all;
}

select {
  @apply text-sm text-white px-3 py-1.5 bg-white/5 border-2 border-white/10 outline-lime-500 focus:ring-lime-500 focus:border-lime-500 rounded-none ring-1 ring-white/5 transition-all min-w-[200px];
}

a {
  @apply text-lime-600 hover:text-lime-400 transition-all ease-in-out underline;
}

.button-base {
  @apply no-underline inline-block text-sm font-semibold rounded-none transition-all duration-300 ease-in-out border-2 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-1.5 font-bold text-sm;
}

.button-small {
  @apply px-2 py-1 font-bold text-xs;
}

.button--primary {
  @apply button-base button-normal text-white/80 hover:text-white border-lime-500 md:my-auto bg-lime-600 hover:bg-lime-400 transition-all disabled:border-lime-500/30 disabled:bg-transparent disabled:text-lime-500/40 disabled:cursor-not-allowed;
}

.button--primary-sm {
  @apply button-base button-small text-white/80 hover:text-white border-lime-500 md:my-auto bg-lime-600 hover:bg-lime-400 transition-all disabled:border-lime-500/30 disabled:bg-transparent disabled:text-lime-500/40 disabled:cursor-not-allowed;
}

.button--secondary {
  @apply button-base button-normal border-lime-400 no-underline text-lime-400 md:my-auto hover:bg-lime-400/10 transition-all;
  @apply disabled:text-lime-500/30 disabled:border-lime-500/20 disabled:bg-transparent disabled:cursor-not-allowed;
}

.button--secondary-sm {
  @apply button-base button-small border-lime-400 no-underline text-lime-400 md:my-auto hover:bg-lime-400/10 transition-all;
  @apply disabled:text-lime-500/30 disabled:border-lime-500/20 disabled:bg-transparent disabled:cursor-not-allowed;
}

.button--secondary-danger {
  @apply button-base button-normal border-red-600/60 bg-red-600/10 no-underline text-red-600 md:my-auto hover:bg-red-600/30 transition-all;
  @apply disabled:text-red-600/30 disabled:border-red-600/20 disabled:bg-transparent disabled:cursor-not-allowed;
}

.button--secondary-danger-sm {
  @apply button-base button-small border-red-600/60 bg-red-600/10 no-underline text-red-600 md:my-auto hover:bg-red-600/30 transition-all;
  @apply disabled:text-red-600/30 disabled:border-red-600/20 disabled:bg-transparent disabled:cursor-not-allowed;
}

.radio-group {
  @apply isolate rounded-none flex;

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

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

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

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

.checkbox-group {
  @apply isolate;

  label {
    @apply button-base button-normal text-lime-500 hover:bg-lime-100 hover:border-lime-300 hover:z-20;
    @apply dark:text-white dark:hover:text-white dark:bg-transparent dark:border-lime-500 dark:hover:bg-lime-900/50;
    @apply inline-flex items-center focus:z-10 mb-0 !important;    
    
    &:has(input:checked) {
      @apply text-lime-950 bg-lime-100 border-lime-300 dark:border-lime-500 dark:bg-lime-600/20 dark:text-white z-10 !important;

      &:before {
        content: '✓';
        @apply mr-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.
 *


 */