@import "tailwindcss";

@plugin "tailwind-scrollbar-hide";
@plugin "./tailwindcss-grid-areas.js";

@utility scrollbar-hide {
  /* Firefox */
  scrollbar-width: none;

  /* Safari and Chrome */
  &::-webkit-scrollbar {
    display: none;
  }

  /* IE and Edge */
  & {
    -ms-overflow-style: none;
  }
}

@utility scrollbar-default {
  /* Firefox */
  scrollbar-width: auto;

  /* Safari and Chrome */
  &::-webkit-scrollbar {
    display: block;
  }

  /* IE and Edge */
  & {
    -ms-overflow-style: auto;
  }
}

@utility scrollbar-list {
  &::-webkit-scrollbar {
    width: 18px;
    height: 18px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 12px;
  }

  &::-webkit-scrollbar-thumb {
    width: 6px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    border: 6px solid transparent;
    background-clip: padding-box;
  }
}

@utility typo-title48 {
  font-size: 48px;
  line-height: 64px;
  letter-spacing: 0.48px;
}

@utility typo-title32 {
  font-size: 32px;
  line-height: 48px;
  letter-spacing: 0.48px;
}

@utility typo-title28 {
  font-size: 28px;
  line-height: 42px;
  letter-spacing: 0.48px;
}

@utility typo-title24 {
  font-size: 24px;
  line-height: 36px;
  letter-spacing: 0.48px;
}

@utility typo-subTitle20 {
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0.48px;
}

@utility typo-subTitle18 {
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0.48px;
}

@utility typo-contents18 {
  font-size: 18px;
  line-height: 32px;
  letter-spacing: 0.48px;
}

@utility typo-contents16 {
  font-size: 16px;
  line-height: 30px;
  letter-spacing: 0.48px;
}

@utility typo-body16 {
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0.48px;
}

@utility typo-body14 {
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.48px;
}

@utility typo-body13 {
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0.48px;
}

@utility typo-caption12 {
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.48px;
}

@utility typo-caption11 {
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.48px;
}

@utility tracking-default {
  letter-spacing: 0.48px;
}


@layer base {
  ::-webkit-resizer {
    display: none;
  }

  button,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"] {
    cursor: pointer;
  }
}

@variant hover {
  @media (hover: hover) and (pointer: fine) {
    &:hover {
      @slot;
    }
  }
}

@variant group-hover {
  @media (hover: hover) and (pointer: fine) {
    .group:hover & {
      @slot;
    }
  }
}


@theme {
  --animate-ripple-outline-small: rippleOutlineSmall 0.3s ease-in-out infinite;
  --animate-ripple-outline: rippleOutline 0.3s ease-in-out infinite;
  --animate-ripple: ripple 0.3s ease-in-out infinite;
  --animate-checkbox-check: stroke 0.3s cubic-bezier(0.65,0,0.45,1) forwards;

  @keyframes rippleOutlineSmall {
    0% {
    height: 30%;
    width: 30%;
    border-radius: 7px;
    opacity: 100;
    }
    100% {
      height: 100%;
      width: 100%;
      border-radius: 7px;
      opacity: 0;
    }
  }
  @keyframes rippleOutline {
    0% {
      height: 30%;
      width: 30%;
      border-radius: 11px;
      opacity: 100;
    }
    100% {
      height: 100%;
      width: 100%;
      border-radius: 11px;
      opacity: 0;
    }
  }
  @keyframes ripple {
    0% {
      height: 30%;
      width: 30%;
      border-radius: 9999px;
      opacity: 100;
    }
    100% {
      height: 100%;
      width: 100%;
      opacity: 0;
    }
  }

  @keyframes stroke {
    100% {
      stroke-dashoffset: 0;
    }
  }
}