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

@layer components {
  .btn {
    @apply text-gray-700 hover:bg-slate-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium;
  }

  .btn-secondary {
    @apply rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50;
  }

  .btn-primary {
    @apply rounded-md bg-emerald-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-emerald-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-600;
  }

  .input {
    @apply block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-slate-600 sm:text-sm sm:leading-6;
  }

  .dash-container {
    @apply mx-auto max-w-7xl px-2 sm:px-6 lg:px-8 pt-8;
  }

  .notification {
    @apply mx-auto max-w-7xl px-2 sm:px-6 lg:px-8;
  }

  .text-input {
    @apply block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600 sm:text-sm sm:leading-6;
  }

  .select-input {
    @apply block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600 sm:max-w-xs sm:leading-6;
  }

  .label {
    @apply block text-sm font-medium leading-6 text-gray-900;
  }

  .caption {
    @apply mt-2 text-sm leading-6 text-gray-600;
  }

  .dash-title {
    @apply text-xl font-semibold leading-7 text-gray-900 mt-4;
  }

  .dash-description {
    @apply mt-1 text-sm leading-6 text-gray-600;
  }

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

  .animate-spin {
    animation: spin 1s linear infinite;
  }

  button:disabled > img {
    filter: invert(1);
  }
}

@layer base {
  :root {
    --tw-ring-color: #1A2040;
  }
}

@layer utilities {
  .focus\:ring-2:focus {
    --tw-ring-color: #1A2040;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) #1A2040;
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.animate-fade-in-down {
  animation: fadeInDown 0.3s ease-out forwards;
}
.animate-fade-out {
  animation: fadeOut 0.3s ease-out forwards;
}
/*
 * 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.
 *


 */