//          888             888                            d8b      888
//          888             888                            Y8P      888
//          888             888                                     888
// .d8888b  888888 888  888 888  .d88b.   .d88b.  888  888 888  .d88888  .d88b.
// 88K      888    888  888 888 d8P  Y8b d88P"88b 888  888 888 d88" 888 d8P  Y8b
// "Y8888b. 888    888  888 888 88888888 888  888 888  888 888 888  888 88888888
//      X88 Y88b.  Y88b 888 888 Y8b.     Y88b 888 Y88b 888 888 Y88b 888 Y8b.
//  88888P'  "Y888  "Y88888 888  "Y8888   "Y88888  "Y88888 888  "Y88888  "Y8888
//                      888                   888
//                 Y8b d88P              Y8b d88P
//                  "Y88P"                "Y88P"

@import 'directives';
@import '../tokens/tokens';
@import 'styleguide/prism';

ds-styleguide-parameters {
  ~ .kss-panel {
    margin-top: $space-m;
  }

  ~ .kss-source {
    border-top-width: 0;
  }
}

.component-container {
  margin-bottom: $space-m;
  padding: $space-s;

  > * > * {
    box-shadow: 0 0 $space-l 0 color(cyan, 30, 70);
  }
}

.panel {
  h1 {
    font-size: $font-size-m;
    font-weight: $font-weight-bold;
    margin-top: 0;
    text-transform: none;
  }

  pre[class*='language-'] {
    margin-bottom: 0;
  }
}

markdown > h1 + p {
  margin-top: (-$space-s);

  > em {
    color: $color-theme-base-accent;
    font-size: $font-size-l;
    font-style: normal;
  }
}

.kss-breadcrumb:only-child {
  margin: $space-s 0;
  padding: 0;

  li {
    display: inline-block;
    list-style: none;
    margin: 0;

    &:last-child a {
      color: color(black);
      text-decoration: none;

      &:active,
      &:focus,
      &:hover {
        color: color(black);
      }
    }

    + li:before {
      color: color(cyan, 30, 50);
      content: ' ➔ ';
      padding: 0 $space-s;
    }
  }
}

.kss-colors {
  display: grid;
  line-height: $line-height-button;
  grid-template-columns: 1fr;
  grid-gap: $space-m;
  margin-bottom: $space-m;

  @include breakpoint(l) {
    grid-template-columns: repeat(2, 1fr);
  }

  @include breakpoint(xl) {
    grid-template-columns: repeat(3, 1fr);
  }
}

.kss-color-samples {
  .kss-color-sample {
    display: grid;
    align-items: end;
    padding: $space-m;
    grid-template-areas:
      'code code code'
      'lum hex score';
    grid-template-columns: 4rem auto;
    grid-template-rows: 2rem auto 2rem;

    @include breakpoint(s) {
      grid-template-areas: 'lum code hex score';
      grid-template-columns: 4rem auto 4.5rem 3.5rem;
      grid-template-rows: auto;
    }

    .kss-color-name {
      display: none;
    }

    &:first-child {
      display: grid;
      margin-bottom: $space-xs;
      grid-template-areas:
        'name name name'
        'code code code'
        'lum hex score';
      grid-template-columns: 4rem auto 3.5rem;
      grid-template-rows: 4rem 2rem 2rem;

      @include breakpoint(s) {
        grid-template-areas:
          'name name name name'
          'lum code hex score';
        grid-template-columns: 4rem auto 4.5rem 3.5rem;
        grid-template-rows: 6rem 2rem;
      }

      .kss-color-name {
        display: block;
      }

      .kss-opt-lum {
        display: none;
      }
    }
  }
}

.kss-color-name {
  align-self: start;
  font-size: $font-size-l;
  font-weight: $font-weight-bold;
  text-transform: capitalize;
  grid-area: name;
}

.kss-color-lum {
  grid-area: lum;
}

.kss-color-code {
  align-self: start;
  font-family: $font-family-mono;
  font-size: $font-size-xs;
  font-weight: $font-weight-normal;
  grid-area: code;

  @include breakpoint(s) {
    align-self: end;
  }
}

.kss-color-hex {
  font-family: $font-family-mono;
  font-size: $font-size-xs;
  text-align: right;
  grid-area: hex;
}

.kss-color-score {
  padding-left: $space-m;
  text-align: center;
  grid-area: score;

  .tag-label {
    cursor: help;
  }
}

.kss-color-sample-white {
  border: $border-base;
}

.kss-contrast-aaa,
.kss-contrast-aa,
.kss-contrast-aa18,
.kss-contrast-dnp {
  text-transform: uppercase;
}

.kss-contrast-aaa,
.kss-contrast-aa {
  background-color: color(green);
}

.kss-contrast-aa18 {
  background-color: color(orange, 60);
}

.kss-contrast-dnp {
  background-color: color(red, 80);
}

.kss-description {
  margin-bottom: $space-m;
}

.kss-directive {
  &.panel {
    border-color: color(cyan, 30);
    padding: 0;

    .panel-header {
      background-color: color(cyan, 30);
      margin: 0;
    }
  }

  pre {
    border-width: 0;
    font-family: $font-family-mono;
  }
}

.kss-gradients {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: $space-m;

  @include breakpoint(l) {
    grid-template-columns: repeat(2, 1fr);
  }

  @include breakpoint(xl) {
    grid-template-columns: repeat(3, 1fr);
  }
}

.kss-home {
  pre {
    margin-bottom: $space-m;
  }

  .kss-home-subheader {
    font-size: $font-size-m;
    font-weight: $font-weight-normal;
    text-transform: none;
  }
}

.kss-main {
  padding: $space-m $space-m 0;

  @include breakpoint(l) {
    padding: $space-m $space-l 0;
  }
}

.kss-icons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  grid-gap: $grid-gap-row $grid-gap-col;
  padding: $space-m !important;

  @include breakpoint(m) {
    grid-template-columns: repeat(3, 1fr);
  }

  @include breakpoint(l) {
    grid-template-columns: repeat(4, 1fr);
  }

  li {
    border: $border-base;
    color: $color-theme-base-text;
    list-style: none;
    margin-bottom: 0;
    padding: $space-m;
    text-align: center;
  }
}

.kss-markup {
  margin-bottom: $space-m;
  position: relative;

  [ngxClipboard] {
    background-color: color(cyan, 40);
    padding: $space-xs;
    position: absolute;
    right: $space-s;
    top: $space-s;

    &:active,
    &:focus,
    &:hover {
      background-color: color(white);
      color: color(cyan, 40);
    }
  }

  pre {
    margin-bottom: 0;
  }
}

.kss-panel {
  margin: 0;

  + .kss-source {
    border-top-width: 0;
  }

  > :first-child > :last-child {
    margin-bottom: 0;
  }

  .kss-markup {
    margin-bottom: 0;
  }
}

.kss-parameters {
  background-color: $color-state-info-background;
  border: $border-base;
  font-family: $font-family-mono;
  display: grid;
  grid-column-gap: $grid-gap-col;
  grid-row-gap: $space-xs;
  padding: $space-m;

  @include breakpoint(m) {
    grid-template-columns: min-content auto auto;
    grid-template-rows: auto;
  }
}

.kss-parameters-color-sample {
  border: $border-base;
  height: $space-l;
  width: 100%;

  @include breakpoint(m) {
    height: $space-m;
    width: $space-m;
  }

  rect {
    height: 100%;
    width: 100%;
  }
}

.kss-parameters-description {
  color: $color-state-info-accent;
  font-style: italic;
  margin-bottom: $space-m;

  @include breakpoint(m) {
    margin-bottom: 0;
  }

  &:last-child {
    margin-bottom: 0;
  }
}

.kss-parameters-var {
  font-weight: $font-weight-bold;
  white-space: nowrap;

  + .kss-parameters-value {
    margin-bottom: $space-m;

    @include breakpoint(m) {
      margin-bottom: 0;
    }
  }
}

.kss-ref {
  display: none;
  float: right;
  font-weight: $font-weight-bold;
}

.kss-section-buttons {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  white-space: nowrap;
}

.kss-section-borders {
  > div {
    background-color: color(grey, 95);
    padding: $space-s;
    margin-bottom: $space-m;
  }
}

.kss-section-grid {
  .grid {
    > * {
      padding: $space-s;
    }

    > :first-child {
      background-color: color(cyan, 20);
      color: $color-theme-dark-text;
    }

    > :nth-child(2) {
      background-color: color(cyan, 30);
      color: $color-theme-dark-text;
    }

    > :nth-child(3) {
      background-color: color(cyan, 40);
      color: $color-theme-dark-text;
    }

    > :nth-child(4) {
      background-color: color(cyan, 50);
    }

    > :nth-child(5) {
      background-color: color(cyan, 60);
    }

    > :nth-child(6) {
      background-color: color(cyan, 70);
    }
  }

  &.kss-section-alignment {
    .grid {
      background-color: color(cyan, 90);
      min-height: 10rem;

      @include breakpoint(m) {
        background-image: linear-gradient(
          90deg,
          color(cyan, 90) 0%,
          color(cyan, 90) 33.2833%,
          color(cyan, 10) 33.2833%,
          color(cyan, 10) 33.3833%,
          color(cyan, 90) 33.3833%,
          color(cyan, 90) 66.6166%,
          color(cyan, 10) 66.6166%,
          color(cyan, 10) 66.7166%,
          color(cyan, 90) 66.7166%,
          color(cyan, 90) 100%
        );
      }
    }
  }
}

.kss-section-icons {
  > span > icon {
    display: none;
  }
}

.kss-section-offcanvas {
  display: none;
}

.kss-section-states .panel {
  margin-bottom: 0;
}

.kss-source {
  margin-bottom: $space-l;
  padding: $space-s $space-m;
}

.kss-spacer {
  background-color: color(grey, 50, 50);
}

.kss-spacer-grid {
  display: grid;
  grid-column-gap: $grid-gap-col;
  grid-row-gap: $space-xs;

  @include breakpoint(m) {
    grid-template-columns: min-content auto;
    grid-template-rows: auto;
  }

  div {
    white-space: nowrap;
  }
}

.kss-sub-section-links {
  li {
    font-size: $font-size-l;
    font-weight: $font-weight-bold;
  }
}

.kss-swatch {
  border: $border-base;
  bottom: -3px;
  height: $space-m;
  position: relative;
  width: $space-m;

  rect {
    height: 100%;
    width: 100%;
  }
}

.site-header {
  margin-bottom: 0;

  > nav > ul li.site-name {
    border-bottom-width: 0;
  }
}

.site-outlet-kss {
  section {
    margin: $space-m 0;
  }
}