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

@layer components {
  .table-loading {
    position: relative;
    overflow: hidden;
    @apply bg-blue-primary;
  }

  .table-loading::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(
      90deg,
      rgba(233, 233, 233, 1) 0,
      rgba(233, 233, 233, 0.9) 50%,
      rgba(233, 233, 233, 0.8) 100%
    );
    animation: table-loading 1s ease-out infinite;
    content: '';
  }
  .card {
    @apply border-fill-tertiary bg-tertiary rounded border p-6;
  }
}

@keyframes table-loading {
  100% {
    transform: translateX(0%);
    opacity: 0;
  }
}

body {
  @apply font-14-regular text-primary bg-primary;
  font-family: LINESeedJP, LINESeedKR, LINESeedEN, sans-serif;
}

a {
  cursor: pointer;
}

th {
  position: relative;
}

/* Table resizing */
.resizer {
  position: absolute;
  right: 0;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
  width: 8px;
  height: 100%;
  top: 0;
}

@font-face {
  font-family: 'LINESeedEN';
  font-style: thin;
  font-weight: 100;
  src:
    local(※),
    url('/fonts/LINESeedEN/WOFF2/LINESeedEN-Th.woff2') format('woff2'),
    url('/fonts/LINESeedEN/WOFF/LINESeedEN-Th.woff') format('woff'),
    url('/fonts/LINESeedEN/TTF/LINESeedEN-Th.ttf') format('truetype');
}

@font-face {
  font-family: 'LINESeedEN';
  font-style: normal;
  font-weight: 400;
  src:
    local(※),
    url('/fonts/LINESeedEN/WOFF2/LINESeedEN-Rg.woff2') format('woff2'),
    url('/fonts/LINESeedEN/WOFF/LINESeedEN-Rg.woff') format('woff'),
    url('/fonts/LINESeedEN/TTF/LINESeedEN-Rg.ttf') format('truetype');
}

@font-face {
  font-family: 'LINESeedEN';
  font-style: bold;
  font-weight: 700;
  src:
    local(※),
    url('/fonts/LINESeedEN/WOFF2/LINESeedEN-Bd.woff2') format('woff2'),
    url('/fonts/LINESeedEN/WOFF/LINESeedEN-Bd.woff') format('woff'),
    url('/fonts/LINESeedEN/TTF/LINESeedEN-Bd.ttf') format('truetype');
}

@font-face {
  font-family: 'LINESeedJP';
  font-style: thin;
  font-weight: 100;
  src:
    local(※),
    url('/fonts/LINESeedJP/WOFF2/LINESeedJP-Th.woff2') format('woff2'),
    url('/fonts/LINESeedJP/WOFF/LINESeedJP-Th.woff') format('woff'),
    url('/fonts/LINESeedJP/TTF/LINESeedJP-Th.ttf') format('truetype');
}

@font-face {
  font-family: 'LINESeedJP';
  font-style: normal;
  font-weight: 400;
  src:
    local(※),
    url('/fonts/LINESeedJP/WOFF2/LINESeedJP-Rg.woff2') format('woff2'),
    url('/fonts/LINESeedJP/WOFF/LINESeedJP-Rg.woff') format('woff'),
    url('/fonts/LINESeedJP/TTF/LINESeedJP-Rg.ttf') format('truetype');
}

@font-face {
  font-family: 'LINESeedJP';
  font-style: bold;
  font-weight: 700;
  src:
    local(※),
    url('/fonts/LINESeedJP/WOFF2/LINESeedJP-Bd.woff2') format('woff2'),
    url('/fonts/LINESeedJP/WOFF/LINESeedJP-Bd.woff') format('woff'),
    url('/fonts/LINESeedJP/TTF/LINESeedJP-Bd.ttf') format('truetype');
}

@font-face {
  font-family: 'LINESeedKR';
  font-style: thin;
  font-weight: 100;
  src:
    local(※),
    url('/fonts/LINESeedKR/WOFF2/LINESeedKR-Th.woff2') format('woff2'),
    url('/fonts/LINESeedKR/WOFF/LINESeedKR-Th.woff') format('woff'),
    url('/fonts/LINESeedKR/TTF/LINESeedKR-Th.ttf') format('truetype');
}

@font-face {
  font-family: 'LINESeedKR';
  font-style: normal;
  font-weight: 400;
  src:
    local(※),
    url('/fonts/LINESeedKR/WOFF2/LINESeedKR-Rg.woff2') format('woff2'),
    url('/fonts/LINESeedKR/WOFF/LINESeedKR-Rg.woff') format('woff'),
    url('/fonts/LINESeedKR/TTF/LINESeedKR-Rg.ttf') format('truetype');
}

@font-face {
  font-family: 'LINESeedKR';
  font-style: bold;
  font-weight: 700;
  src:
    local(※),
    url('/fonts/LINESeedKR/WOFF2/LINESeedKR-Bd.woff2') format('woff2'),
    url('/fonts/LINESeedKR/WOFF/LINESeedKR-Bd.woff') format('woff'),
    url('/fonts/LINESeedKR/TTF/LINESeedKR-Bd.ttf') format('truetype');
}

html {
  --body-background-color: #ffffff;
}
html.dark {
  --body-background-color: #191919;
}

input:focus::placeholder {
  color: transparent;
}
