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

#nosearch-portal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

html {
  font-size: 62.5%;
}

@layer base {
  body {
    @apply text-gray-10 text-body-4;
  }
  h1 {
    @apply m-0 block font-extrabold !important;
  }
}

@layer components {
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  .scrollbar-default {
    -ms-overflow-style: auto;
    scrollbar-width: auto;
  }

  .scrollbar-default::-webkit-scrollbar {
    display: auto;
  }

  /* Ring Progress Bar style */
  .svg-pi-wrapper {
    position: relative;
  }

  .svg-pi {
    transform: rotate(-90deg); /* Fix the orientation */
  }

  /* Animated spinner version */
  .svg-pi-indicator--spinner {
    animation: spinner 0.75s linear infinite;
    transform-origin: center;
  }

  .svg-pi-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }

  .svg-pi-label__loading {
    opacity: 0.5;
    font-size: 0.75em;
  }

  .svg-pi-label__progress {
    font-size: 1.5em;
    font-weight: bold;
  }

  .svg-pi-label__loading,
  .svg-pi-label__progress {
    display: block;
  }
}

span.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple 600ms linear;
  background-color: rgba(255, 255, 255, 0.1);
}
@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}