@import './variables.scss';

* {
  @apply m-0 p-0;
}

*,
::before,
::after {
  @apply box-border border-0 border-gray-200;
}

html {
  font-size: 16px !important;
  -webkit-text-size-adjust: 100%;
  @apply bg-reco-bg-light dark:bg-reco-bg-dark text-gray-700 dark:text-white font-normal text-sm font-sans;
}

@media screen and (max-width: 640px) {
  html {
    font-size: 14px !important;
  }
}

body {
  @apply m-0 w-full antialiased overflow-x-hidden; // antialiased 字体平滑
  min-width: 320px;
  direction: ltr;
  text-rendering: optimizeLegibility; // 像素较小时字体会拼接在一起
}

main {
  @apply block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  @apply -mt-12 mb-8 mx-0 pt-20 leading-5 z-negative-10;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
b {
  @apply font-semibold;
}

h1:hover .header-anchor,
h1:focus .header-anchor,
h2:hover .header-anchor,
h2:focus .header-anchor,
h3:hover .header-anchor,
h3:focus .header-anchor,
h4:hover .header-anchor,
h4:focus .header-anchor,
h5:hover .header-anchor,
h5:focus .header-anchor,
h6:hover .header-anchor,
h6:focus .header-anchor {
  @apply opacity-100 text-reco-brand;
}

h1 {
  @apply text-3xl -mt-20;
}

h2 {
  @apply leading-tight text-2xl;
  &:not(:first-of-type) {
    @apply -mt-4 relative;
    &::before {
      @apply absolute left-0 bottom-14 block w-full border-t border-solid border-reco-border-light;
      @apply dark:border-reco-border-dark;
      content: ' ';
    }
  }
}

h3 {
  @apply text-xl;
}

h4 {
  @apply text-lg;
}

h5 {
  @apply text-base;
}

h6 {
  @apply text-sm;
}

p,
ol,
ul {
  @apply my-4 leading-7;
}

a,
area,
button,
[role="button"],
input,
label,
select,
summary,
textarea {
  touch-action: manipulation;
  @apply no-underline bg-transparent;
}

button {
  @apply text-base;
}

a:active,
a:link,
a:focus,
a:visited {
  @apply text-gray-700 dark:text-white;
}

a.header-anchor {
  @apply text-base float-left opacity-0 mt-0.5 mr-1 -ml-3;
  &:hover, &:focus {
    @apply no-underline;
  }
}

figure {
  @apply m-0;
}

img {
  @apply max-w-full;
}

ul,
ol {
  @apply pl-5;
}

li > ul,
li > ol {
  @apply m-0;
}

table {
  @apply w-full rounded-md overflow-x-auto;
  border-collapse: collapse;

  tr {
    @apply border-2 border-solid border-reco-border-light;
    @apply dark:border-reco-border-dark;
  }

  th {
    @apply text-left font-semibold bg-reco-bg-light-light;
    @apply dark:bg-reco-bg-dark-light;
  }

  td, th {
    @apply px-2 py-3;
    &:not(:last-child) {
      @apply border-r-2 border-reco-border-light;
      @apply dark:border-reco-border-dark;
    }
  }
}

blockquote {
  @apply bg-gray-400 bg-opacity-10 text-base py-1 pb-4 my-4 mx-0 border-l border-solid;
  border-color: #dfe2e5;
}

kbd {
  @apply border border-gray-400 border-b-2 border-opacity-20 rounded;
  @apply bg-gray-400 bg-opacity-5 py-0.5 px-2 text-sm text-center font-mono;
}

blockquote > p {
  @apply m-0;
}

form {
  @apply m-0;
}

.theme.no-navbar > h1,
.theme.no-navbar > h2,
.theme.no-navbar > h3,
.theme.no-navbar > h4,
.theme.no-navbar > h5,
.theme.no-navbar > h6 {
  @apply mt-6 pt-0;
}

.theme.no-navbar aside {
  @apply top-0;
}

@media screen and (min-width: 720px) {
  .theme.no-sidebar aside {
    @apply hidden;
  }

  .theme.no-sidebar main {
    @apply ml-0;
  }
}

// .icon-btn {
//   @apply inline-block cursor-pointer select-none;
//   @apply opacity-75 transition duration-200 ease-in-out align-middle rounded p-2;
//   @apply hover:(opacity-100 bg-gray-400 bg-opacity-10);
// }

.icon-btn.disabled {
  @apply opacity-25 pointer-events-none;
}

// .inline-icon-btn {
//   @apply text-primary-deep;
//   @apply inline-block rounded p-0.5 text-2xl align-middle;
//   @apply border border-primary border-opacity-20;
// }

p > img {
  @apply rounded-2xl;
}

li svg {
  @apply align-middle;
  transform: translateY(-10%);
}

/************** 滚动条 **************/
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track-piece {
  // background-color: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb:vertical {
  height: 5px;
  @apply bg-reco-brand;
}

::-webkit-scrollbar-thumb:horizontal {
  width: 5px;
  @apply bg-reco-brand;
}