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

@layer base {
  *,
  ::after,
  ::before {
    @apply border-border;

    box-sizing: border-box;
    border-style: solid;
    border-width: 0;
  }

  html {
    @apply text-foreground bg-background font-sans text-[100%];

    font-variation-settings: normal;
    line-height: 1.15;
    text-size-adjust: 100%;
    font-synthesis-weight: none;
    scroll-behavior: smooth;
    text-rendering: optimizelegibility;
    -webkit-tap-highlight-color: transparent;

    /* -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; */
  }

  #app,
  body,
  html {
    @apply size-full;

    /* scrollbar-gutter: stable; */
  }

  body {
    min-height: 100vh;

    /* pointer-events: auto !important; */

    /* overflow: overlay; */

    /* -webkit-font-smoothing: antialiased; */

    /* -moz-osx-font-smoothing: grayscale; */
  }

  a,
  a:active,
  a:hover,
  a:link,
  a:visited {
    @apply no-underline;
  }

  ::view-transition-new(root),
  ::view-transition-old(root) {
    @apply animate-none mix-blend-normal;
  }

  ::view-transition-old(root) {
    @apply z-[1];
  }

  ::view-transition-new(root) {
    @apply z-[2147483646];
  }

  html.dark::view-transition-old(root) {
    @apply z-[2147483646];
  }

  html.dark::view-transition-new(root) {
    @apply z-[1];
  }

  input::placeholder,
  textarea::placeholder {
    @apply opacity-100;
  }

  /* input:-webkit-autofill {
    @apply border-none;

    box-shadow: 0 0 0 1000px transparent inset;
  } */

  input[type='number']::-webkit-inner-spin-button,
  input[type='number']::-webkit-outer-spin-button {
    @apply m-0 appearance-none;
  }

  /* 只有非mac下才进行调整，mac下使用默认滚动条 */
  html:not([data-platform='macOs']) {
    ::-webkit-scrollbar {
      @apply h-[10px] w-[10px];
    }

    ::-webkit-scrollbar-thumb {
      @apply bg-border rounded-sm border-none;
    }

    ::-webkit-scrollbar-track {
      @apply rounded-sm border-none bg-transparent shadow-none;
    }

    ::-webkit-scrollbar-button {
      @apply hidden;
    }
  }
}

@layer components {
  .flex-center {
    @apply flex items-center justify-center;
  }

  .flex-col-center {
    @apply flex flex-col items-center justify-center;
  }

  .outline-box {
    @apply outline-border relative cursor-pointer rounded-md p-1 outline outline-1;
  }

  .outline-box::after {
    @apply absolute left-1/2 top-1/2 z-20 h-0 w-[1px] rounded-sm opacity-0 outline outline-2 outline-transparent transition-all duration-300 content-[""];
  }

  .outline-box.outline-box-active {
    @apply outline-primary outline outline-2;
  }

  .outline-box.outline-box-active::after {
    display: none;
  }

  .outline-box:not(.outline-box-active):hover::after {
    @apply outline-primary left-0 top-0 h-full w-full p-1 opacity-100;
  }

  .vben-link {
    @apply text-primary hover:text-primary-hover active:text-primary-active cursor-pointer;
  }

  .card-box {
    @apply bg-card text-card-foreground border-border rounded-xl border;
  }
}

html.invert-mode {
  @apply invert;
}

html.grayscale-mode {
  @apply grayscale;
}