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

@layer components {
  body {
    @apply text-black dark:text-slate-300 bg-sky-50 dark:bg-slate-950;
  }

  h1 {
    @apply font-bold;
    font-size: clamp(1.3rem, 3.6vw, 1.9rem);
  }

  h2 {
    @apply font-bold;
    font-size: clamp(1.25rem, 3.3vw, 1.6rem);
  }

  h3 {
    @apply font-bold;
    font-size: clamp(1.2rem, 3vw, 1.3rem);
  }

  h4 {
    @apply font-bold;
    font-size: clamp(1.1rem, 2.5vw, 1.2rem);
  }

  .minion-block {
    @apply border rounded-md border-slate-200 dark:border-sky-900 block p-4 text-left shadow-md bg-slate-50 dark:bg-sky-950;
  }

  .minion-block.minion-block-raw {
    @apply border-none p-1 text-left shadow-none bg-transparent dark:bg-transparent h-full;
  }

  .minion-block-flex {
    @apply flex flex-col;
  }

  @media (min-width: 768px) {
    .minion-block-flex {
      @apply flex-row;
    }
  }

  .minion-block table {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
  }

  .minion-block th,
  .minion-block td {
    @apply px-2;
  }

  vr {
    border-right-width: 1px;
    width: 0;
    @apply border-slate-200 dark:border-sky-900;
  }
  hr {
    border-top-width: 1px;
    height: 0;
    @apply border-slate-200 dark:border-sky-900;
  }

  .primary-button {
    @apply flex justify-center py-2 px-4 rounded-md shadow-sm font-medium text-white bg-sqarp-light-blue hover:bg-sky-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sqarp-light-blue disabled:bg-sky-700 disabled:cursor-not-allowed;
  }

  .danger-button {
    @apply flex justify-center py-2 px-4 rounded-md shadow-sm font-medium text-white bg-red-500 hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-300 disabled:bg-red-800 disabled:cursor-not-allowed;
  }

  .light-button {
    @apply flex justify-center py-2 px-4 rounded-md shadow-sm font-medium text-black dark:text-slate-300 bg-slate-50 dark:bg-transparent hover:bg-slate-200 dark:hover:bg-sky-800 dark:hover:bg-opacity-35 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black dark:focus:ring-slate-300 disabled:bg-slate-50 dark:disabled:bg-sky-950 disabled:cursor-not-allowed;
  }

  .notice-block {
    @apply border-sqarp-light-blue border-2 py-3 px-5 pr-3 flex rounded-md justify-between items-center;
  }
}

.fa-solid.fa-spinner {
  animation: rotateStep 0.8s steps(8) infinite;
}

@keyframes rotateStep {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}