@import '../../src/styles/fonts';
@import '../../src/styles/all';
@import '../../src/styles/functions';
@import 'code';

:root {
  --color-document: hsla(var(--hsl-primary-fade), 0.2);
}

body {
  background-image: url(./wave.svg) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;

  @media #{$is-desktop-up} {
    background-position-y: -140px !important;
  }
}

.content {
  & > h1,
  & > h2,
  & > h3,
  & > h4,
  & > h5,
  & > h6 {
    position: relative;
    margin-top: var(--space-l);

    .header-anchor {
      text-decoration: none;
      vertical-align: middle;
      font-size: 0.5em;
      position: absolute;
      transform: translateY(-50%);
      margin: 0 var(--space-m);
      color: n-hsl(var(--hsl-grey-text), 0.7);
      top: 50%;
      right: 0;

      @media #{$is-tablet-up} {
        right: 100%;
      }
    }

    &:hover {
      .header-anchor {
        display: block;
        color: n-hsl(var(--hsl-primary), 0.5);
      }
    }

    code {
      background-color: var(--color-grey-background);
      font-weight: 600;
    }
  }
}

p code {
  background-color: var(--color-grey-background);
  font-weight: 600;
}

.n-module.demo {
  background: var(--color-white);
  margin: var(--space-m) 0;
  box-shadow: var(--box-shadow-s);
  max-width: calc(100vw - calc(var(--space-m) * 2));

  .demo {
    max-width: 100%;
    border-bottom: 3px solid var(--color-grey-border);
    padding: var(--space-m);
  }

  @media #{$is-mobile-down} {
    max-width: 100vw;
    margin: var(--space-m) calc(-1 * var(--space-m));
  }
}

.component-meta {
  margin: var(--space-m) 0;
}

.component-meta__item {
  &.required {
    &:after {
      content: '*';
      color: var(--color-danger);
      display: inline-block;
      margin-left: var(--space-xs);
    }
  }
}

.gridlines {
  --grid-size: 16px;
  --grid-color: rgba(240, 0, 0, 0.2);

  position: relative;
  margin: var(--space-l) 0;
  display: block;
  overflow: hidden;

  &:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(90deg, var(--grid-color) 1px, transparent 1px), linear-gradient(0deg, var(--grid-color) 1px, transparent 1px);
    background-size: var(--grid-size) var(--grid-size);
    background-position: var(--grid-size) var(--grid-size);
    position: absolute;
  }

  .highlight {
    position: relative;
  }

  .highlight:before {
    content: "";
    display: block;
    background: rgba(0, 0, 0, 0.025);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
}

div[class*="language-"].extra-class {
  border-left: 8px solid var(--color-grey-border);
}