/**
 * Document
 * Content-box & Responsive typography
 */
:where(*, ::after, ::before, ::backdrop, ::file-selector-button) {
  box-sizing: border-box;
  background-repeat: no-repeat;
  min-width: 0;
  min-height: 0;
  scroll-behavior: smooth;
  scrollbar-width: none;

  /*
   * https://segmentfault.com/a/1190000045292874
   * 全局生效 calc-size(auto)
   * 使 hight: auto; 这样的属性也可以参与过渡动画
   */
  interpolate-size: allow-keywords;

  /*
   * 使离散css布局属性也能参与到 transition 过渡效果中
   * 例如: display
   * 原理, none -> block/flex 先设置 display: true; 然后通过 transition: 2s allow-discrete; 设置的时间过渡动画效果，，反之亦然
   */
  transition-behavior: allow-discrete;
  /* transition: 2s allow-discrete; */
}

:is(::before, ::after) {
  text-decoration: inherit;
  vertical-align: inherit;
}

:where(:root) {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background-color: var(--x-background-color);
  color: var(--x-color);
  font-weight: var(--x-font-weight);
  font-size: var(--x-font-size);
  line-height: var(--x-line-height);
  font-family: var(--x-font-family);
  text-underline-offset: var(--x-text-underline-offset);
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
}

/* svg 图标垂直居中？ */
:where(svg) {
  vertical-align: middle;
}

/* TODO 完善下这里？ */
/* allow-discrete表示允许离散的CSS属性也支持transition过渡效果，
 * 其中，最具代表性的离散CSS属性莫过于display属性了。
 */
/* * { */
.hack-me {
  /* transition-behavior: normal; default */
  transition-behavior: allow-discrete;

  transition: 0.25s allow-discrete;
  opacity: 1;
  /* @starting-style顾名思义就是声明起始样式，专门用在transition过渡效果中。 */
  @starting-style {
    opacity: 0;
  }
}