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

@layer components {
  .spinner {
    margin: 3.2rem auto 1.6rem;
    width: 60px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 8px solid theme("colors.primary.900");
    border-right-color: theme("colors.primary.200");
    animation: rotate 1s infinite linear;
  }

  .spinner-mini {
    margin: 0;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid theme("colors.primary.200");
    border-right-color: transparent;
    animation: rotate 1s infinite linear;
  }

  @keyframes rotate {
    to {
      transform: rotate(1turn);
    }
  }
}

/* For data picker */

.rdp {
  --rdp-cell-size: 32px !important;
  --rdp-accent-color: theme("colors.accent.500") !important;
  --rdp-background-color: theme("colors.accent.600") !important;
  margin: 0 !important;
}