// Wraps a function signature.
// Changes its appearance when directly placed inside a `tsd-panel`.
// Can be combined with class `tsd-kind-icon` to display an icon in front of the signature.
//
// <div class="tsd-kind-method">
//   <div class="tsd-signature tsd-kind-icon">
//     get<wbr>Child<wbr>ByName<span class="tsd-signature-symbol">(</span>
//       name<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span>
//     <span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span>
//     <a href="# class="tsd-signature-type">DeclarationReflection</a>
//   </div>
// </div>
//
.tsd-signature
    margin: 0 0 1em 0
    padding: 10px
    border: 1px solid $COLOR_PANEL_DIVIDER
    font-family: $FONT_FAMILY_MONO
    font-size: $FONT_SIZE_MONO
    overflow-x: auto

    &.tsd-kind-icon
        padding-left: 30px

        &:before
            top: 10px
            left: 10px

    .tsd-panel > &
        margin-left: -20px
        margin-right: -20px
        border-width: 1px 0

        &.tsd-kind-icon
            padding-left: 40px

            &:before
                left: 20px

.tsd-signature-symbol
    color: $COLOR_TEXT_ASIDE
    font-weight: normal

.tsd-signature-type
    font-style: italic
    font-weight: normal


// Displays a list of signatures.
// Changes its appearance when directly placed inside a `tsd-panel`.
// Made interactive by JavaScript at `typedoc.Signature`.
//
// <ul class="tsd-signatures tsd-kind-method">
//   <li class="tsd-signature tsd-kind-icon current">getChildByName(name: string): DeclarationReflection</li>
//   <li class="tsd-signature tsd-kind-icon">getChildByName(names: Array&lt;string&gt;): DeclarationReflection</li>
// </ul>
//
.tsd-signatures
    padding: 0
    margin: 0 0 1em 0
    border: 1px solid $COLOR_PANEL_DIVIDER

    .tsd-signature
        margin: 0
        border-width: 1px 0 0 0
        transition: background-color 0.1s

        &:first-child
            border-top-width: 0

        &.current
            background-color: $COLOR_PANEL_DIVIDER

    &.active > .tsd-signature
        cursor: pointer

    .tsd-panel > &
        margin-left: -20px
        margin-right: -20px
        border-width: 1px 0

        .tsd-signature.tsd-kind-icon
            padding-left: 40px

            &:before
                left: 20px

    .tsd-panel > a.anchor + &
        border-top-width: 0
        margin-top: -20px


// Holds the descriptions related to a list of signatures.
// Made interactive by JavaScript at `typedoc.Signature`.
//
// <ul class="tsd-descriptions active">
//   <li class="tsd-description current">
//     <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
//   </li>
//   <li class="tsd-description">
//     <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
//   </li>
// </ul>
//
ul.tsd-descriptions
    position: relative
    overflow: hidden
    padding: 0
    list-style: none

    > li
        @extend %prevent-children-margin

    &.active > .tsd-description
        display: none

        &.current
            display: block

        &.fade-in
            animation: fade-in-delayed 0.3s

        &.fade-out
            animation: fade-out-delayed 0.3s
            position: absolute
            display: block
            top: 0
            left: 0
            right: 0
            opacity: 0
            visibility: hidden

    h4
        font-size: $FONT_SIZE
        margin: 1em 0 0.5em 0

ul.tsd-parameters,
ul.tsd-type-parameters
    list-style: square
    margin: 0
    padding-left: 20px

    > li.tsd-parameter-signature
        list-style: none
        margin-left: -20px

    h5
        font-size: $FONT_SIZE
        margin: 1em 0 0.5em 0

    .tsd-comment
        margin-top: -0.5em
