@import (less) "../../index.less";

@base: {
  max-width: 1000px;
  columns-name: col-;
  columns-total: 12;
  columns-halfgap: false;
  aperture: 1rem;
  marge: 1rem;
}

@zindex: {
  dropdown: 1000;
  sticky: 1020;
  fixed: 1030;
  modal-backdrop: 1040;
  modal: 1050;
  popover: 1060;
  tooltip: 1070;
}

@typography: {
  site-font-size: 16px;
  base-font-size: 1.065rem;
  base-line-height: calc(4px + 2ex + 4px);
  base-margin: 0.65em;
  base-type-ratio: @type-ratios[perfectFourth];
  mobile-type-ratio: @type-ratios[majorThird];
}

@hues: {
  primary: 228;
  secondary: 50;
  success: 103;
  danger: 358;
}


@fonts: {
  @primary: {
    @name: 'Roboto', sans-serif;
    @weight: {
      @light: 300;
      @regular: 400;
      @bold: 500;
      @extra-bold: 700;
      @black: 900;
    }
  }

  @secondary: {
    @name: monospace;
    @weight: {
      @regular: 400;
    }
  }
}

body {
  .layout();
  font-family: @fonts[@primary][@name];
}

@header-height: 60px;

.header {
  background-color: @colors[@light][primary];
  border-bottom: 1px solid lighten(@colors[@light][primary], 10%);
  position: fixed;
  width: 100vw;
  height: @header-height;
  z-index: @zindex[sticky];
  left: 0;
  top: 0;

  &-wrap,
  &-container {
    height: 100%;
  }

  &-logo {
    width: 5em;
    padding: 0.4em;
    .flex-container(wrap, row, center, center);

    img {
      width: 100%;
      object-fit: contain;
    }
  }

  &-title {
    font-weight: 900;
    color: white;
  }

  &-under {
    height: @header-height;
    width: 100%;
    display: block;
  }
}

.home {
  background-color: @colors[@light][primary];
  padding: 2em 0em 0em;
  position: relative;

  .hero {
    .flex-container(wrap, column, center, center);
      color: white;
      position: relative;
      z-index: 1;

    .logo {
      width: 100%;
      max-width: 20em;
    }

    &-title {
    }
  }
}

pre code {
  font-size: 1rem;
}

.test {
  color: .get-color(primary, gloom)[];
}

.navigation {
  border-right: 1px solid @colors[@light][border];
  position: sticky;
  top: @header-height;
  height: 100vh;

  .container {
    height: calc(100vh - @header-height);
    overflow-y: auto;
  }

  ul {
    padding: 0;
    font-weight: bold;
    margin-top: .scale-type(2)[@result];

    &:first-of-type {
      margin-bottom: 2em;
    }

    li {
      margin-bottom: 1em;
    }

    ul {
      margin-top: -0.65em;
      font-size: .scale-type(-0.5)[@result];
      font-weight: normal;

      li {
        margin-bottom: 0.65em;
      }
    }
  }
}

.docs {
  padding-left: 2rem;

  @media screen and (max-width: @media[tablet]) {
    padding-left: 0;
  }

  .exemple {
    border: 1px solid @colors[@light][border];
    padding: 1rem;
    margin: 1rem 0rem;
    font-size: 1rem;
  }
}

.summary {
  .link {
    padding-bottom: 0.65em;
    margin-right: 0.4em;
    border-color: @colors[@light][border];
    font-family: @fonts[@secondary][@name];
  }
}
