// Personnalisation Design System
$ds-header-bg: $primary;
$ds-header-color: $white;
$ds-menu-bg: $gray-200;
$ds-menu-color: $black;
$ds-index-color: $primary;

// Autres variables
$ds-topbar-height: 4.4rem;
$ds-menu-width: 26rem;
$ds-ff: 'Raleway', sans-serif;

// Structure
.ds-wrapper {
  display: flex;
  flex-wrap: wrap;
  min-height: 100vh;
}
.ds-header {
  padding: 0.5rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  text-transform: uppercase;
  font-size: 1.2rem;
  font-weight: $font-weight-normal;
  font-family: $ds-ff;
  background: $ds-header-bg;
  color: $ds-header-color;
  a {
    color: inherit;
    text-decoration: none;
    font-weight: inherit;
    &:hover, &:focus, &:active {
      text-decoration: underline;
    }
  }
  .ds-baseline {
    margin: 0;
    font-size: inherit;
    color: inherit;
    font-weight: inherit;
    font-family: inherit;
    line-height: inherit;
  }
  .ds-copyright {
    margin: 0;
    font-family: inherit;
  }
}
.ds-menu-wrapper {
  font-size: 1.6rem;
  font-weight: $font-weight-normal;
  background: $ds-menu-bg;
  color: $ds-menu-color;
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  li + li {
    margin-top: 3rem;
  }
  a {
    display: block;
    color: inherit;
    text-decoration: none;
    font-weight: inherit;
    &:hover, &:focus, &:active {
      text-decoration: underline;
    }
  }
}
.ds-menu-picto {
  width: 4rem;
  height: 4rem;
  padding: 0;
  border: none;
  background: none;
  svg:last-child {
    display: none;
  }
}
.ds-content {
  flex: 1;
  max-width: 100%;
}
.ds-container {
  padding: 6.5rem 1.5rem;
  max-width: 110rem;
  margin: auto;
}
.ds-separator {
  margin: 4rem 0;
}
.ds-min-height {
  min-height: 5rem;
}

// text
.ds-title {
  margin-bottom: 1.5rem;
  font-family: $ds-ff;
  font-size: 4rem;
  color: $black;
}
.ds-subtitle {
  margin-top: 8rem;
  margin-bottom: 5rem;
  padding-bottom: 2rem;
  color: $black;
  font-family: $ds-ff;
  font-size: 2rem;
  text-transform: uppercase;
  border-bottom: 0.1rem solid $gray-500;
}
.ds-text {
  font-family: $ds-ff;
  font-size: 1.8rem;
  line-height: 1.2;
  color: $gray-700;
}

// btn
.ds-btn {
  display: block;
  padding: 1.1rem 1.5rem;
  color: inherit;
  text-align: center;
  font-size: 1.3rem;
  text-decoration: none;
  text-transform: uppercase;
  border: 0.2rem solid $ds-index-color;
  &:hover {
    color: $white;
    background: $ds-index-color;
  }
}
.ds-btn-code {
  float: right;
  background: none;
  border: none;
  transition: opacity 0.3s;
  &:before {
    content: '';
    display: block;
    width: 2rem;
    height: 2rem;
    background: {
      image: url('~media/icons/code.svg');
      repeat: no-repeat;
      size: cover;
    };
  }
  &:hover {
    opacity: 0.6;
  }
}

// Index
.ds-index-wrapper {
  display: flex;
  padding: 4rem 1.5rem;
  font-size: 1.5rem;
  color: $ds-index-color;
  background: rgba($ds-index-color, 0.2);
  overflow: auto;
}
.ds-index-content {
  margin: auto;
  p {
    margin-bottom: 3rem;
  }
}
.ds-index-img {
  width: 100%;
  height: auto;
}
.ds-index-title {
  margin-bottom: 3rem;
  font-family: $ds-ff;
  font-size: 3.5rem;
  font-weight: $font-weight-sbold;
  color: inherit;
}

// Colors
.ds-color {
  display: block;
  position: relative;
  width: 100%;
  height: 5rem;
  margin-bottom: 10rem;
  border: 0.1rem solid transparent;
  span {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
  }
  .name {
    bottom: -3.2rem;
  }
  .code {
    bottom: -5.5rem;
  }
  &.bg-light, &.bg-white, &.bg-gray-100 {
    border-color: $gray-700;
  }
}

// Icons
.col-icon {
  margin-bottom: 2rem;
  text-align: center;
  font-size: 1.3rem;
  line-height: 1;
}
.ds-icon {
  border: 0.1rem solid $gray-400;
  svg {
    height: 3rem;
    margin: 0.5rem auto;
  }
  span {
    display: block;
    padding: 0.5rem;
    font-size: 1.2rem;
    border-top: 0.1rem solid $gray-400;
  }
}

// Buttons
.btn-wrapper {
  .btn {
    margin: 0.5rem 0;
  }
}

// Components
.component-wrapper {
  .btn-back-top {
    position: static;
  }
  [data-simplebar] {
    max-height: 20rem;
  }
}

// Code
.bg-gray-700 {
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
pre {
  display: flex;
}
code {
  display: block;
  padding: ($grid-gutter-width/2) ($grid-gutter-width/1.5);
  width: 100%;
  font-family: monospace;
  font-size: 1rem;
  text-align: left;
  white-space: pre-wrap;
  border: 0.1rem solid $gray-300;
  background-color: $white;
}

.ds-example {
  margin-bottom: 4rem;
  pre {
    display: none;
  }
  &.active {
    .html {
      padding: 2rem;
      border: 0.1rem solid $gray-300;
    }
    pre {
      display: block;
      margin: -2rem 0;
    }
  }
}

/* RESPONSIVE */
/***************************************/

@include media-breakpoint-down(lg) {
  .ds-wrapper {
    flex-direction: column;
  }
  .ds-menu {
    display: flex;
    position: fixed;
    height: 100vh;
    top: 0;
    bottom: 0;
    background: $ds-menu-bg;
    width: 100vw;
    z-index: 2;
    padding: 1.5rem;
    left: -100%;
    transition: 0.3s;
    .ds-menu-picto {
      position: absolute;
      right: 0;
      top: 0;
    }
    ul {
      flex: 1;
      overflow-y: auto;
    }
  }
  .ds-menu-header {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 1.5rem;
    img {
      width: auto;
      height: 4rem;
    }
  }
  .open-ds-menu {
    overflow: hidden;
    .ds-menu {
      left: 0;
    }
    .ds-menu-picto {
      svg:first-child {
        display: none;
      }
      svg:last-child {
        display: inline;
      }
    }
  }
}
@include media-breakpoint-up(md) {
  // btn
  .ds-btn {
    display: inline-block;
    padding: 1.1rem 3rem;
    font-size: 1.5rem;
  }

  // Index
  .ds-index-wrapper {
    padding: 8.5rem;
    font-size: 1.8rem;
  }
  .ds-index-title {
    font-size: 5.5rem;
  }
}
@include media-breakpoint-up(xl) {
  // Structure
  .ds-header {
    position: fixed;
    z-index: 1071;
    width: 100%;
    height: $ds-topbar-height;
    padding: 1rem 3.5rem;
    font-size: 1.6rem;
  }
  .ds-menu-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    position: fixed;
    z-index: 3;
    top: 4.4rem;
    height: calc(100vh - 4.4rem);
    flex-shrink: 0;
    width: $ds-menu-width;
    padding: 5rem 2.5rem 2.5rem;
    &:after {
      content: '';
      display: block;
    }
  }
  .ds-menu-header {
    margin-bottom: 30%;
    img {
      width: 100%;
      height: auto;
    }
  }
  .ds-menu-picto {
    display: none;
  }
  .ds-menu {
    overflow-y: auto;
    flex: 1;
  }
  .ds-content {
    max-width: 100%;
    margin: 4.4rem 0 0 $ds-menu-width;
  }

  // Index
  .ds-index {
    .ds-content {
      display: flex;
      position: relative;
      overflow: hidden;
    }
  }
  .ds-index-wrapper {
    width: calc(50vw - #{$ds-menu-width});
    min-width: 65rem;
  }
  .ds-index-img {
    width: 50vw;
    height: calc(100vh - #{$ds-topbar-height});
    object-fit: cover;
  }
}
