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

@layer base {
  body {
    @apply font-nunito;
  }
}
@layer components {
  
  .pulse-error {
    @apply bg-red-100 text-red-600;
    animation: pulse-red 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  .omatase-background-green {
    /* background-color: #a8d5ba; */
    background-color: #e4f4ea;
  }

  .omatase-background-red {
    /* background-color: #f7a399; */
    background-color: #fce9e7;
  }

  .omatase-background-violet {
    /* background-color: #d1c4e9; */
    background-color: #f2e9f9;
  }

  .omatase-text-green {
    /* color: #333333; */
    color: #007d38;
  }

  .omatase-text-red {
    /* color: #333333; */
    color: #a82222;
  }

  .omatase-red-hover {
    background-color: #B3746B;
  }

  .omatase-green-hover {
    background-color: #5CA462;
  }

  .omatase-button {
    @apply rounded-md 
           px-2 sm:px-3 
           py-1.5 sm:py-2 
           text-xs sm:text-sm 
           font-semibold 
           text-white 
           shadow-lg 
           transition-colors 
           duration-200
           whitespace-nowrap;
  }

  .omatase-simple-button {
    @apply rounded-md 
           px-2 sm:px-3 
           py-1.5 sm:py-2 
           text-xs sm:text-sm 
           font-semibold 
           text-black 
           transition-colors 
           duration-200
           whitespace-nowrap;
  }

  .omatase-button-green {
    @apply omatase-button;
    background-color: #6FBF73;
    @apply hover:omatase-green-hover;
  }

  .omatase-button-green-small {
    @apply omatase-button-green px-2 py-1 text-xs;
  }

  .omatase-button-red {
    @apply omatase-button;
    background-color: #D08A7E;
    @apply hover:omatase-red-hover;
  }

  .omatase-button-red-small {
    @apply omatase-button-red px-2 py-1 text-xs;
  }

  .omatase-button-violet {
    @apply omatase-button bg-indigo-600 hover:bg-indigo-500;
  }

  .omatase-page-background {
    background-color: #F7F9F9;
  }

  .omatase-table-empty {
    color: #999999;
    font-size: 1.3rem;
  }

  #flash-notice {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
  }
}

@keyframes pulse-red {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}