/*
    Naming Convention
    - Custom tags have the same class name
    - Template tags have classes that match their slot
    */

    .pv-component {
        padding: 3em 5vw;
        min-height: 50vh;
    }
    .pv-component:not(:last-child) {
        border-bottom: 2px solid gray;
    }

    .pv-type {
        margin-top: 2em;
        min-height: 33vh;
    }

    .type-name {
        background: var(--primary-green);
    }

    .types .details {
        /*display: grid;*/
        /* grid-template-columns: 1fr 1fr; */
        display: flex;
        flex-wrap: wrap;
    }

    .parameter-stuff {
        display: flex;
        justify-content: space-between;
        flex-grow: 1;
    }


    .parameter-description {
        min-width: 200px;
        text-align: right;
    }

    .parameter-description .possible-values {
        margin-top: 1em;
    }

    .parameter-description .data-type {
        background: var(--black);
        color: white;
        padding: 1em 2em;
        display: inline-block;
    }

    .parameter-description .possible-values>li {
        padding: 0.2em;
    }

    .pv-parameter {
        padding: 0.5em 1em;
    }

    .pv-parameter:not(.active) {
        color: var(--gray);
    }

    .pv-parameter.active {
        background: var(--bright-blue);
    }

    .pv-code {
        background-color: #263238;
        color: white;
        overflow-x: auto;
        flex-grow: 2;
    }

    .pv-code:before {
        content: none;
    }

    .pv-code .gray {
        color: var(--gray);
    }