@import "./_styles/tailwind.css";
@import "./_styles/debug.css";
@import "./_styles/components.css";
@import "./_styles/fonts.css";
@import "./_styles/highlight.css";
@import "./_styles/docsearch.css";
/* @import "node_modules/@glidejs/glide/src/assets/sass/glide.core"; */

/* Antialiasing */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: #f5f5fa;
}

/* Hero */
.bg-docsearch-hero {
  background-image: url('assets/bg-docsearch.svg'), linear-gradient(#fff, #f5f5fa);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center calc(100% - 18px);
}

/* Gradients */
.bgtb-white-pure-moon {
  background-image: linear-gradient(#fff, #f5f5fa);
}
.bgtb-moon-white-pure {
  background-image: linear-gradient(#f5f5fa, #fff);
}

/* Global styles */
a,
a:active {
  @apply .cursor-pointer;
  @apply .text-nebula .no-underline;
}
a:hover,
a:focus {
  @apply .underline;
}
code {
  @apply .code .text--1 .text-mars-2;
  @apply .p-0x;
  @apply .bg-moon;
  @apply .rounded-1;
}

/* Content converted form markdown */
.documentation-content {
  /* Paragraphs */
  p {
    @apply .leading-2 my-1;
  }
  ul {
    @apply .leading-2 my-1;
  }
  /* Titles */
  h2 {
    @apply .text-solstice .text-5 .normal;
    @apply .mb-1;
    /* Trick to have heading scroll into view and not being hidden by header */
    &:before {
      content: "";
      display: block;
      @apply .h-3;
    }
    .anchor {
      @apply .hidden;
      &:after {
        content: "#";
      }
    }
    &:hover .anchor {
      @apply .inline-block;
    }
  }
}

/* Custom styles */
.custom-community-projects {
  width: 400px;
  opacity: 0;
  pointer-events: none;
  transition-property: opacity;
  transition-duration: 0.25s;
  will-change: opacity;
}
.custom-community-link:hover .custom-community-projects {
  opacity: 1;
  pointer-events: auto;
}

/* Demo on the homepage */
.custom-demo-mask {
  opacity: 1;
  transition-property: opacity;
  transition-duration: 0.25s;
  will-change: opacity;
}
.custom-demo:hover {
  .custom-demo-mask {
    opacity: 0;
  }
}

/**
 * When we need to show code in action, we often need to show screenshots or
 * screencasts. This class will still an element to make it look like a browser
 * window.
 **/
.fake-browser {
  padding: 24px 1px 1px 1px;
  @apply bg-grey;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  &:before {
    content: "";
    position: absolute;
    top: 6px;
    left: 16px;
    @apply bg-red;
    display: block;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    box-shadow: 25px 0 0 rgba(58, 178, 189, 0.5),
      50px 0 0 rgba(236, 139, 99, 0.5);
  }
}