@import 'variables';

.entityName {
    // stylelint-disable value-keyword-case
    composes: pathname from '../Doc.module.scss';
    // stylelint-enable value-keyword-case
    font-size: $font-size-h2;
}

.entityDescription {
    padding-bottom: $spacer;
    white-space: pre-line;
}

.property {
    padding: $spacer / 2;
    border: 1px solid $brand-grey-lighter;
    margin-bottom: $spacer;
    border-radius: $border-radius;
    position: relative;

    &[data-deprecated='true'] {
        > *:not(.deprecation) {
            opacity: .5;
        }

        code {
            opacity: 1;
            background: none;
            padding: 0;
        }

        .sourceLink {
            display: none;
        }
    }
}

.propertyName,
.propertyType,
.propertyModifier {
    font-size: $font-size-base;
    font-family: $font-family-monospace;
    margin-bottom: $spacer / 4;
    margin-top: 0;
    display: inline-block;
    padding: 0 $spacer / 4;
    border-radius: $border-radius;
    vertical-align: middle;
}

.propertyName {
    font-size: $font-size-large;
    padding: 0;
    margin-right: $spacer / 3;
}

.propertyType,
.propertyModifier {
    font-size: $font-size-small;
    color: $brand-grey;
    margin-right: $spacer / 4;
}

.propertyType {
    &[data-type='method'] {
        background: rgba($green, .3);
    }

    &[data-type='property'] {
        background: rgba($yellow, .3);
    }
}

.propertyModifier {
    background: rgba($red, .2);

    &[data-secondary] {
        background: rgba($brand-blue, .2);
    }
}

.propertyDescription {
    margin-bottom: $spacer;
}

.sourceLink {
    display: block;
    font-size: $font-size-mini;
    color: $brand-grey-light;
    margin-top: $spacer / 2;

    &:hover,
    &:focus {
        transform: none;
    }

    @media (min-width: $break-point--large) {
        margin-top: 0;
        position: absolute;
        bottom: $spacer / 2;
        right: $spacer / 2;
    }
}

.deprecation {
    font-size: $font-size-small;
    margin-top: $spacer / 4;

    strong {
        color: $brand-grey-light;
    }
}

.type {
    display: inline-block;
    color: $brand-grey;
    font-family: $font-family-monospace;
    font-size: $font-size-small;

    a {
        &:hover {
            opacity: .6;
        }
    }
}

.typeSymbol {
    opacity: .6;
}

.subHeading {
    font-size: $font-size-base;
    border-bottom: 1px solid $brand-grey-lighter;
    padding-bottom: $spacer / 4;
    margin-bottom: $spacer / 4;
    color: $brand-grey;
}

.parameters {
    margin-top: $spacer / 1.5;

    h5,
    p {
        margin: 0;
    }

    h5 {
        font-size: $font-size-small;
        margin-bottom: $spacer / 4;
        margin-right: $spacer / 4;
        margin-left: -(.2rem);
        display: inline-block;
    }

    code {
        padding: .2rem;
    }
}

.parameterOptional {
    font-size: $font-size-small;
    vertical-align: top;
    color: $brand-purple;
}
