@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%];

    background-color: hsl(var(--surface-canvas));
    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 {
  @media (max-width: 768px) {
    .easyflow-modal-grid--2 {
      grid-template-columns: 1fr;
    }
  }

  .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;
  }

  .easyflow-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;
  }

  .easyflow-modal-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .easyflow-modal-form--compact {
    gap: 10px;
  }

  .easyflow-modal-section {
    padding: 14px;
    background: hsl(var(--modal-content-surface-strong));
    border: 1px solid hsl(var(--modal-divider));
    border-radius: 14px;
    box-shadow: none;
  }

  .easyflow-modal-grid {
    display: grid;
    gap: 14px 16px;
  }

  .easyflow-modal-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .easyflow-modal-field-tip {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.5;
    color: hsl(var(--text-muted));
  }

  .easyflow-modal-form .el-form-item {
    margin-bottom: 0;
  }

  .easyflow-modal-form .el-form-item__label {
    padding-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: hsl(var(--text-strong));
  }

  .easyflow-modal-form .el-input__wrapper,
  .easyflow-modal-form .el-select__wrapper,
  .easyflow-modal-form .el-textarea__inner,
  .easyflow-modal-form .el-date-editor.el-input__wrapper {
    background: hsl(var(--input-background));
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px hsl(var(--input) / 92%);
    transition:
      box-shadow 0.2s ease,
      border-color 0.2s ease,
      transform 0.2s ease;
  }

  .easyflow-modal-form .el-input__wrapper,
  .easyflow-modal-form .el-select__wrapper,
  .easyflow-modal-form .el-date-editor.el-input__wrapper {
    min-height: 42px;
  }

  .easyflow-modal-form .el-textarea__inner {
    min-height: 96px;
    padding: 10px 12px;
  }

  .easyflow-modal-form .el-input__wrapper:hover,
  .easyflow-modal-form .el-select__wrapper:hover,
  .easyflow-modal-form .el-textarea__inner:hover,
  .easyflow-modal-form .el-date-editor.el-input__wrapper:hover {
    box-shadow: inset 0 0 0 1px hsl(var(--primary) / 18%);
  }

  .easyflow-modal-form .el-input__wrapper.is-focus,
  .easyflow-modal-form .el-select__wrapper.is-focused,
  .easyflow-modal-form .el-textarea__inner:focus,
  .easyflow-modal-form .el-date-editor.el-input__wrapper.is-focus {
    box-shadow:
      inset 0 0 0 1px hsl(var(--primary) / 72%),
      0 0 0 4px hsl(var(--primary) / 12%);
  }

  .easyflow-modal-form .el-form-item.is-error .el-input__wrapper,
  .easyflow-modal-form .el-form-item.is-error .el-select__wrapper,
  .easyflow-modal-form .el-form-item.is-error .el-textarea__inner,
  .easyflow-modal-form
    .el-form-item.is-error
    .el-date-editor.el-input__wrapper {
    box-shadow:
      inset 0 0 0 1px hsl(var(--destructive) / 80%),
      0 0 0 4px hsl(var(--destructive) / 8%);
  }
}

html.invert-mode {
  @apply invert;
}

html.grayscale-mode {
  @apply grayscale;
}

.page-container {
  padding: 20px;
  margin: 20px;
  background-color: var(--el-bg-color);
  border-radius: var(--el-border-radius-base);
}

.handle-div {
  margin-bottom: 10px;
}
