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

:root {
  --foreground-rgb: 0, 0, 0;
  --background-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  /*
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-rgb: 0, 0, 0;
  }
  */
}

body {
  background-color: rgb(var(--background-rgb));
  color: rgb(var(--foreground-rgb));
}

button:focus, a:focus {
  outline: 2px solid transparent;
}

@layer components {
  /*
   * Dialog animations
   */
  .animation-dialog-content-show-sm {
    animation-name: dialog-content-show-sm;
    animation-duration: 350ms;
    animation-timing-function: cubic-bezier(0.000, 0.980, 0.665, 0.980); /* custom ease-in-out */
  }

  @keyframes dialog-content-show-sm {
    from {
      transform: translate3d(0, 85%, 0);
    }
    to {
      transform: translate3d(0, 10%, 0);
    }
  }

  .animation-dialog-content-hide-sm {
    animation-name: dialog-content-hide-sm;
    animation-duration: 250ms;
    animation-timing-function: linear;
  }
  
  @keyframes dialog-content-hide-sm {
    from {
      transform: translate3d(0, 10%, 0);
    }
    to {
      transform: translate3d(0, 100%, 0);
    }
  }
  
  @keyframes dialog-content-show-md {
    from {
      opacity: 0;
      transform: scale(0.95);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  @keyframes dialog-content-hide-md {
    from {
      opacity: 1;
      transform: scale(1);
    }
    to {
      opacity: 0;
      transform: scale(0.95);
    }
  }

  @keyframes fake-fade {
    from {
      opacity: 1;
    }
    to {
      opacity: 1;
    }
  }
  /**/

  /*
   Spinner
  */
  .spinner {
    width: 1rem;
    height: 1rem;
    border: 0.125rem solid #fff;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: flex;
    box-sizing: border-box;
    animation: rotation 800ms linear infinite;
  }

  @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
  } 
  /**/

  /*
   * Simple reusable animations
  */  
  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  @keyframes fade-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  /**/

}

