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

:root {
  --achievement-size: 420px;
}

@layer base {
  html,
  body,
  #root {
    @apply h-full font-sans;
  }

  #root {
    @apply isolate;
  }
}

@layer components {
  .stopwatch {
    background-image: linear-gradient(180deg, #4acd79, #1cad4a);
    background-size: 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -moz-text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
  }

  .dropdown-shadow {
    box-shadow:
      rgba(0, 0, 0, 0.05) 0px 1px 3px,
      rgba(0, 0, 0, 0.05) 0px 10px 15px -5px,
      rgba(0, 0, 0, 0.04) 0px 7px 7px -5px;
  }

  .achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--achievement-size), 1fr));
    column-gap: 64px;
    row-gap: 82px;
    padding-bottom: 16px;
    justify-content: flex-start;
    justify-items: flex-start;
  }

  .stat-wrapper::after {
    background-image: radial-gradient(circle, currentcolor 1px, transparent 1.5px);
    background-position: bottom;
    background-size: 1ex 4.5px;
    background-repeat: space no-repeat;
    content: "";
    flex-grow: 1;
    height: 1em;
    order: 2;
    align-self: center;
  }
}

@layer utilities {
  /* For Firefox Browser */
  .scrollbar {
    scrollbar-width: auto;
    scrollbar-color: hsla(203, 66%, 56%) hsla(207, 50%, 92%, 0);
  }

  /* For Chrome, EDGE, Opera, Others */
  .scrollbar::-webkit-scrollbar {
    width: 8px;
  }

  .scrollbar::-webkit-scrollbar-track {
    /* background: #fff; */
    @apply bg-transparent;
  }

  .scrollbar::-webkit-scrollbar-thumb {
    /* background: #000; */
    @apply bg-primary-blue;
  }
}
