@import 'tailwindcss';
@import './assets/styles.css';
@import './index.css';

@theme {
  --color-primary: white;
  --color-secondary: #14171a;
}
html,
body {
  width: 100%;
  height: 100%;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
}
h1 {
  @apply text-2xl font-bold;
}
h2 {
  @apply text-xl font-bold;
}
h3 {
  @apply text-lg font-bold;
}
@utility card {
  @apply bg-white shadow-md rounded-lg p-4;
}
@utility card-title {
  @apply text-lg font-bold;
}
@utility card-subtitle {
  @apply text-sm text-gray-500;
}
@utility card-description {
  @apply text-gray-700 break-words;
}
@utility card-code {
  @apply bg-gray-100 p-2;
}
@utility card-body {
  @apply text-gray-700;
}
@utility card-key {
  @apply text-xs text-gray-400;
}
@utility card-footer {
  @apply text-sm text-gray-500;
}
@utility btn {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded-sm;
}

@utility layout-menu {
  @apply bg-gray-900 p-2 text-white flex justify-between h-12;
  -webkit-app-region: drag;
}
@utility no-drag {
  -webkit-app-region: no-drag;
}
@utility bg-custom-blue {
  background-color: #3490dc;
}

@utility scrollbar-hidden {
  &::-webkit-scrollbar {
    display: none;
  }
}

/* font-family */
@utility font-family-mon {
  font-family: 'Montserrat', sans-serif;
}
@utility font-family-rob {
  font-family: 'Roboto', sans-serif;
}
@utility font-family-int {
  font-family: 'Inter', sans-serif;
}
@utility font-family-orb {
  font-family: 'Orbitron', sans-serif;
}
@utility font-family-din {
  font-family: 'DIN', sans-serif;
}

@utility flex-row-center {
  @apply flex flex-row items-center justify-center;
}
@utility flex-col-center {
  @apply flex flex-col items-center justify-center;
}

@utility scrollbar {
  overflow: auto;
  /* 整个滚动条 */
  &::-webkit-scrollbar {
    width: 3px;
    height: 3px;
  }

  /* 滚动条有滑块的轨道部分 */
  &::-webkit-scrollbar-track-piece {
    background-color: transparent;
    border-radius: 1px;
  }

  /* 滚动条滑块(竖向:vertical 横向:horizontal) */
  &::-webkit-scrollbar-thumb {
    cursor: pointer;
    background-color: #c1c1c1;
    border-radius: 5px;
  }

  /* 滚动条滑块hover */
  &::-webkit-scrollbar-thumb:hover {
    background-color: #999999;
  }

  /* 同时有垂直和水平滚动条时交汇的部分 */
  &::-webkit-scrollbar-corner {
    display: block; /* 修复交汇时出现的白块 */
  }
}
