@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import './prism.css';

html,
body,
#app {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
}

html.dark {
  background: #222;
}

#nprogress {
  pointer-events: none;

  .bar {
    @apply bg-teal-600 opacity-75;

    position: fixed;
    z-index: 1031;
    top: 0;
    left: 0;

    width: 100%;
    height: 2px;
  }
}

.btn {
  @apply px-4 py-1 rounded inline-block
    bg-teal-600 text-white cursor-pointer
    hover:bg-teal-700
    disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50;
}

.icon-btn {
  @apply inline-block cursor-pointer select-none
    opacity-75 transition duration-200 ease-in-out
    hover:opacity-100 hover:text-teal-600;
  font-size: 0.9em;
}

.prose pre {
  text-align: left;
}