/* purgecss start ignore */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
/* purgecss end ignore */
@import 'tailwindcss/utilities';

/* helper for development only */
.nuxt-content-container:hover {
  background: linear-gradient(90deg, transparent 90%, #ffff0030);
}

svg:not(:root).svg-inline--fa {
  overflow: visible;
}

.svg-inline--fa {
  display: inline-block;
  height: 1em;
  overflow: visible;
  vertical-align: -0.125em;
}

/* For dark mode */
html {
  transition: background-color 0.4s, color 0.1s;
}
.dark {
  @apply bg-dark;
  @apply text-white;
}

/* For emojis from discourse */
img.emoji {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  display: inline;
}

/* Loader */
@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

.loading-state {
  position: relative;
  overflow: hidden;
}

.loading-state:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  background-color: inherit;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  top: 0;
  left: 0;
}

.loading-state:after {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: inherit;
  animation: spinner 0.6s linear infinite;
  z-index: 2;
}

/**
 * Transitions
 */

.list-enter-active,
.list-leave-active,
.list-move {
  transition: 250ms cubic-bezier(0.59, 0.12, 0.34, 0.95);
  transition-property: opacity;
}

.list-enter {
  opacity: 0;
}

.list-enter-to {
  opacity: 1;
}

.list-leave-active {
}

.list-leave-to {
  opacity: 0;
}