global.css

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

.container {
  width: 100%;
  overflow: scroll;
  height: 100%;
}
@media (min-width: 1024px) {
  .container {
    max-width: 100%;
  }
}

.loader-spinner {
  @apply absolute animate-spin;
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 100vw;
  background-size: 100% 100%;
  background-position: 0px 0px;
  background-image: conic-gradient(
    from 0deg at 50% 50%,
    var(--app-primary-600) 0%,
    rgb(229, 231, 235, 0.8) 90deg,
    rgb(229, 231, 235, 0.8) 270deg,
    var(--app-primary-600) 360deg
  );

  -webkit-mask:
    radial-gradient(farthest-side, #000 98%, #0000) center/85% 85% no-repeat,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: destination-out;

  mask:
    radial-gradient(farthest-side, #000 98%, #0000) center/85% 85% no-repeat,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.dark .loader-spinner {
  background-image: conic-gradient(
    from 0deg at 50% 50%,
    var(--app-primary-500) 0%,
    rgb(229, 231, 235, 0.2) 90deg,
    rgb(229, 231, 235, 0.2) 270deg,
    var(--app-primary-500) 360deg
  );
}