.profile-display {
    @at-root #{&}__section {
        margin-top: 20px;

        @at-root #{&}--open {
            padding-bottom: 20px;
            border-bottom: 1px solid #e0e0e0;
        }

        &:last-child {
            border-bottom: none;
        }
    }

    h3 {
        margin-top: 0;
        font-size: 1.1rem;
        font-weight: bold;
    }

    @at-root #{&}__values {
        margin-left: 25px;
    }
}

.profile-value {
    @at-root #{&}__item {
        margin: 2px 0;
    }

    @at-root #{&}__disclosure-button {
        margin: 2px 5px 2px 0;
        padding: 0;
        font-size: 0; // Prevent gap between focus border and icon
        border: 0 none;
        background-color: transparent;
        vertical-align: middle;

        .collapsing-title-control {
            display: block;
        }
    }

    @at-root #{&}__json-content {
        padding: 10px;
        border: 1px solid #e0e0e0;
        background-color: #f3f2f3;
    }
}

// For the list of available schemas on the /profiles/ page.
.schema-list {
    display: block;
    margin-top: 10px;

    @media screen and (min-width: $screen-md-min) {
        display: flex;
        flex-wrap: wrap;
    }

    @at-root #{&}__item {
        display: flex;
        align-items: center;
        margin: 2px 0;

        @media screen and (min-width: $screen-md-min) {
            flex: 0 1 50%;
            width: 50%;
        }

        @media screen and (min-width: $screen-lg-min) {
            flex: 0 1 33.33%;
            width: 33.33%;
            margin: 2px 0;
        }

        @media screen and (min-width: $screen-xl-min) {
            flex: 0 1 25%;
            width: 25%;
            margin: 2px 0;
        }

        .btn {
            margin-right: 5px;
        }
    }
}

// Descriptive text for the schema page.
.schema-description {
    margin-top: -15px;
    border-bottom: 1px solid #e0e0e0;

    p {
        line-height: 1.4;
    }
}

.schema-term-links {
    margin: 2px 0 10px;

    @at-root #{&}__title {
        font-weight: bold;
    }
}

// Styles for the raw JSON schema display.
$raw-schema-height: 8000px;

.raw-schema {
    position: relative;
    height: auto;
    max-height: $raw-schema-height;
    overflow: hidden;

    pre {
        overflow: scroll;
        max-height: $raw-schema-height;
    }

    @at-root #{&}__controls {
        position: absolute;
        right: 10px;
        top: 10px;
    }
}

.profiles-controls {
    display: flex;
    margin: 2px;

    .btn {
        margin-left: 5px;
    }
}

/* stylelint-disable-next-line selector-class-pattern */
.type-JSONSchema {
    .tab-nav {
        display: flex;
        justify-content: space-between;
    }
}
