$kss-section-item-color: $cowabunga;
$kss-modifiers-heading-color: $cowabunga;
$kss-modifiers-name-color: $cowabunga;


.kss-documentation {
  z-index: 100;
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  padding: 20px;
  padding-top: 80px;
  background: $white;
  transition: opacity 0.4s ease-out;

  &.kss-state-active { opacity: 0.1; }

  @include mq(min, 1024px) {
    padding-top: 20px;
    padding-left: calc(25% + 20px);
  }

  @include mq(min, 1280px) { padding-left: calc(20% + 20px); }

  @include mq(min, 1440px) { padding-left: calc(15% + 20px); }
}

.kss-section { margin-bottom: 40px; }

.kss-section__content {
  border: 1px solid $gray;
  padding: 1em;

  ol,
  ul,
  p,
  a {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    line-height: 1.5;
  }
}

.kss-section__permalink { text-decoration: none; }

.kss-section__item {
  margin: 0;
  margin-bottom: 5px;
  color: $kss-section-item-color;
  font-size: rem(32px);
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;

  &--depth-2 { font-size: rem(30px); }

  &--depth-3 { font-size: rem(22px); }

  &--depth-4 { font-size: rem(20px); }

  &--depth-5 { font-size: rem(18px); }

  &--depth-6 { font-size: rem(16px); }
}

.kss-section__ref {
  display: inline-block;
  vertical-align: middle;
  padding-right: 5px;
}

.kss-section__name {
  display: inline-block;
  vertical-align: middle;
}

.kss-parameters {
  padding-left: 40px;
  list-style-position: outside;
  list-style-type: circle;
}

.kss-parameters__item { margin-bottom: 15px; }

.kss-parameters__name {
  background: #f5f5f5;
  padding: 5px;
}

.kss-parameters__description {
  margin: 0;
  font-size: rem(16px);
  line-height: 1.5;
}

.kss-section__description {
  margin-bottom: 20px;
  line-height: 1.5;

  &.state-deprecated,
  &.state-experimental {
    display: inline-block;
    margin-bottom: 10px;
    border-radius: 2px;
    padding: 5px 10px;
  }

  &.state-deprecated {
    border: 1px solid orange;
    background: rgba(orange, 0.4);
  }

  &.state-experimental {
    border: 1px solid lightblue;
    background: rgba(lightblue, 0.4);
  }

  ol,
  ul,
  p,
  a {
    color: $black;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    line-height: 1.5;
  }

  ol,
  ul {
    padding-left: 40px;
    list-style-position: outside;
  }

  ol { list-style-type: decimal; }

  ul { list-style-type: circle; }

  ol,
  ul,
  p {
    margin: 0;
    font-size: rem(16px);
  }

  a {
    color: $blue;
    text-decoration: none;
  }

  a:hover,
  a:focus {
    color: lighten($blue, 15%);
    text-decoration: underline;
    outline: 0;
  }

  code {
    display: inline-block;
    padding: 2px 5px;
    background: #F5F5F5;
  }
}

.kss-section__source {
  margin: 0;
  color: darken($gray, 30%);
  font-size: rem(14px);
}

.kss-section__modifiers {
  border: 1px solid $gray;
  border-top: none;
  border-bottom: none;
  padding: 1em;
  background: #FDFDFD;
}

.kss-modifiers__heading {
  margin: 0;
  margin-bottom: 10px;
  font-family: 'Lato', sans-serif;
  font-size: rem(18px);
  font-weight: 700;
  color: $kss-modifiers-heading-color;
}

.kss-modifiers__name {
  margin: 0;
  margin-bottom: 5px;
  font-size: rem(16px);
  font-weight: 400;
  color: $kss-modifiers-name-color;
}

.kss-modifiers__description { margin: 0; }

.kss-modifiers__example {
  position: relative;
  min-height: 50px;
  margin-bottom: 20px;

  &:after {
    content: '';
    display: table;
    clear: both;
  }

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

.kss-section__markup pre[class*=language-] { margin: 0; }