.prose {

  h1, h2, h3, h4, h5, h6 {
    svg.svg-link {
      margin-left: .5rem;

      &:hover{
        filter: brightness(0) saturate(100%) invert(38%) sepia(99%) saturate(497%) hue-rotate(163deg) brightness(87%) contrast(79%);
      }
    }
  }

  > p, .p {
    @include base-type();
    margin-bottom: .5rem;
    color: $charcoal;

    &.intro {
      font-size: 20px;
      line-height: 1.6;

      &-medium {
        font-size: 22px;
        line-height: 1.45;
      }
    }

    &.desc {
      font-size: 16px;
      line-height: 1.5;
    }
  }
  p.release-notes-version {
    font-size: 1.24rem;
    line-height: 1.5;
    font-weight: 700;
  }
  .display-none {
    display: none;
  }
}

#main-content{
  .material-symbols-outlined, .material-icons {
    vertical-align: bottom;
  }
  .index-prose {
    li {
      margin-bottom: 0;
    }
    h4{
      margin-top: .5rem;
    }
  }
  .site-map{
    p.strong-child{
      margin-top: 1rem;
    }
  }
}

.responsive-table {
  overflow-x: auto;
}

.text-recommend{
  background-color: $light-light-gray;
  border-radius: $border-radius-base;
  margin: 1rem 0;
  padding: .5rem;
  >.recommend-text{
    font-weight: bold;
    margin-bottom: 1rem;
    >.svg-inline--fa{
      font-size: 1.2rem;
      margin-right: .5rem;
      top: 2px;
      position: relative;
      &.fa-square-xmark{
        color: $alert-color;
      }
      &.fa-square-check{
        color: green;
      }
    }
  }
  .recommended-text{
    margin-left: 1rem;
    margin-bottom: 1rem;
  }
  code, pre {
    border-color: $code-border;
  }
}

form {
  label{
    >.optional{
      color: $lightgray;
    }
  }
}
