/* @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); */
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --primary-color: #800080;
  --text-on-primary: white;

  --loader-width: 50px;
  --loader-animation-duration: 700ms;
  box-sizing: inherit;
  color:theme('colors.primary-text');
  background-color: theme('colors.primary-background');
}

body {
  
  line-height: 1.7;
  font-size: 0.9rem;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
}

h1{
  color: theme('colors.accent');
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* button:disabled:hover:after {
  position: absolute;
  top: 0;
  left: 75%;
  width: 100%;
  content: attr(title);
  background-color: #ffa;
  color: #000;
  line-height: 1.4em;
  border: 1px solid #000;
} */


 
  /* Ripple effect when button is disabled */
  .ripple-effect::after {
    content: '';
    position: absolute;
    top: 24%; /* Start from bottom */
    left: -74%;   /* Start from left */
    width: 200%;
    height: 200%;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    transform: translate(0, 0) scale(0); /* Start ripple from bottom left */
    animation: ripple-animation 0.4s ease-out ;
    /* animation-iteration-count: infinite; */
    
  }
  
  @keyframes ripple-animation {
    0% {
      transform: translate(0, 0) scale(0); /* Start at bottom left */
      opacity: 1;
    }
    50% {
      transform: translate(0, 0) scale(0.5); /* Start at bottom left */
      opacity: 0.9;
    }
    100% {
      transform: translate(0, 0) scale(1.5); /* Expand the ripple */
      opacity: 0;
    }
  }
  


@layer components{
  .tag-autocomplete-item{
    @apply hover:cursor-pointer font-light bg-blue-100 mx-1 px-1 rounded border-purple-200  border-2 before:font-medium hover:bg-purple-300
  }
  .screen{
    @apply  m-auto max-w-[1150px] w-screen grid p-3;
    grid-template-columns: 2fr 96fr 2fr;
    
  }
  .span-width{
    @apply border-0 col-span-3 
  }

  .content{
    @apply   border-0 text-wrap overflow-x-clip 
  }

  .left-spacer, .right-spacer{
    @apply  text-white
  }

  a:hover{
    @apply underline text-accent 
  }
  
  .form-input{
    @apply placeholder:italic placeholder:text-slate-300 drop-shadow text-black disabled:text-slate-400 disabled:shadow-none disabled:bg-slate-200 disabled:border-slate-200 py-1
  }

  .form-label{
    @apply text-slate-400 focus:text-black  has-[:focus]:text-black transition-all ease-in duration-300
  } 

  .submit-button{
    @apply bg-accent text-white py-1 px-3 rounded shadow 
  } 

  .small-button-original{
    @apply bg-accent text-white px-3 rounded
  } 

  

  .button{
    @apply px-3 py-1 rounded text-primary-text border-[1px] border-black shadow hover:shadow-lg bg-primary-background hover:bg-primary-background-hover hover:scale-105 
          disabled:cursor-not-allowed disabled:bg-slate-200 disabled:text-slate-400 disabled:border-slate-200 disabled:hover:scale-100 disabled:hover:bg-slate-200 disabled:hover:text-slate-400
          disabled:hover:shadow-none disabled:hover:border-slate-200 disabled:shadow-none
  } 

  .small-button {
    @apply py-0
  }

  .accent-button {
    @apply bg-accent hover:bg-accent-hover text-white
  }

  .alert-button {
    @apply bg-alert-background hover:bg-alert-background-hover text-white
  }

  .content{
    @apply flex flex-col items-center justify-between 
  }

  .react-aria-GridList {
    @apply text-2xl
  }
  .react-aria-GridListItem{
    @apply text-green-900
  }
  .big{
    @apply bg-white
  }



  .react-icons{
    @apply inline hover:text-accent 
  }

  /* Archive related styles */
  .readability{
    @apply text-xl p-7 font-sans max-w-5xl 
  }
  .readability p{
    @apply p-5
  }
  .readability a{
    @apply text-blue-700 underline
  }

  .readability img{
    @apply border-2 drop-shadow
  }

  .readability pre{
    @apply border-2 drop-shadow bg-gray-300 font-mono
  }
  .readability code{
    @apply bg-gray-300 text-black font-mono
  }

  .readability h1, h2, h3{
    @apply font-bold
  }
}