main.pcss

@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
@import 'floating-vue/dist/style.css';
@import '@histoire/controls/dist/style.css';

@import 'floating-vue.pcss';
@import 'transitions.pcss';

*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}

a,
input,
button {
  color: inherit;
}

a {
  text-decoration: inherit;
}

input, button {
  font-family: inherit;
}

a,
button {
  user-select: none;
}

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

body,
pre {
  margin: 0;
}

html,
body,
#app {
  height: 100%;
}

html {
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
}

body {
  font-size: 1.125rem;
}

@media (min-width: 640px) {
  body {
    font-size: .875rem;
  }
}

.__histoire-sandbox {
  contain: content;
}

.__histoire-code .shiki {
  background: transparent !important;
}

.htw-prose {
  h1, h2, h3, h4 {
    &:not(:hover) {
      .header-anchor[aria-hidden="true"] {
        visibility: hidden;
      }
    }
  }

  hr {
    margin: 1rem 0;
  }
}

.__histoire-pane-shadow-from-right {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0));
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: right;

  .htw-dark & {
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
  }
}