@import url('https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.0/packages/wanted-sans/fonts/webfonts/variable/split/WantedSansVariable.min.css');

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

* {
  -webkit-tap-highlight-color: transparent;
}

html {
  overflow-y: scroll;
}

body {
  font-family:
    'Wanted Sans Variable',
    'Wanted Sans',
    -apple-system,
    BlinkMacSystemFont,
    system-ui,
    'Segoe UI',
    'Apple SD Gothic Neo',
    'Noto Sans KR',
    'Malgun Gothic',
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    sans-serif;

  background: #ffffff;
  transition: background 0.3s;

  @apply text-black;
}

.scrollbar-x::-webkit-scrollbar {
  @apply lg:h-8;
}

.scrollbar-x::-webkit-scrollbar-thumb {
  @apply lg:bg-gray-500/50 lg:rounded-full;
}

.scrollbar-x::-webkit-scrollbar-thumb:hover {
  @apply lg:bg-gray-500/80;
}

.scrollbar-x::-webkit-scrollbar-track {
  @apply lg:bg-gray-50 lg:rounded-full;
}

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

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

.code {
  font-family: monospace;
}

@keyframes glow {
  from {
    box-shadow: 0 0 8px -4px rgba(70, 167, 235, 0.60);
  }
  to {
    box-shadow: 0 0 8px 4px rgba(70, 167, 235, 0.60);
  }
}

@layer components {
  .glow-primary {
    animation: glow 1s infinite alternate;
  }

  .jelly {
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

  .jelly:active:focus, .jelly:active:hover {
    --tw-scale-x: 0.95;
    --tw-scale-y: 0.95;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .jelly-reduced:active:focus, .jelly-reduced:active:hover {
    --tw-scale-x: 0.98;
    --tw-scale-y: 0.98;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .jelly-increased:active:focus, .jelly-increased:active:hover {
    --tw-scale-x: 0.9;
    --tw-scale-y: 0.9;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .jelly-video {
    @apply jelly jelly-reduced rounded-16 hover:-m-8 hover:bg-gray-50 hover:p-8;
  }

  .jelly-meta {
    @apply jelly jelly-reduced rounded-16 hover:-m-8 hover:bg-gray-100 hover:p-8;
  }
  
  @media (hover: none) {
    .jelly-video {
      @apply -m-8 p-8 selected:bg-gray-50 ;
    }

    .jelly-meta {
      @apply -m-8 p-8 selected:bg-gray-100 ;
    }
  }
}