:root {
    color-scheme: light dark;
}

/* Title for platform availability tables */
#availability-title {
    text-align: center;
    font-weight: bold;
}

/* Style platform availability and widgets by platforms tables */
:is(#availability-title, #api-status-key) + .md-typeset__scrollwrap {
    display: flex;
    flex-flow: nowrap column;
    align-items: center;
}

#availability-title + .md-typeset__scrollwrap table :is(th, td),
.api-reference + .md-typeset__scrollwrap :is(th, td:first-of-type) {
    padding: 0.3rem 0.6rem;
}

:is(#availability-title, .api-reference) + .md-typeset__scrollwrap table th {
    min-width: unset;
}

:is(#availability-title, .api-reference) + .md-typeset__scrollwrap :is(th, td:first-child) {
    font-size: 1rem;
}

/* Shrink padding for the availability dots, to leave more room for description. */
.api-reference + .md-typeset__scrollwrap :is(th, td):not(:first-child) {
    padding: .15rem;
}

.component-name {
    font-weight: bolder;
}

:is(#availability-title, .api-reference, #api-status-key) + .md-typeset__scrollwrap :is(th, td) {
    border: .05rem solid var(--md-typeset-table-color);
}

#availability-title + .md-typeset__scrollwrap :is(th, td),
.api-reference + .md-typeset__scrollwrap :is(th, td:not(:first-child)),
#api-status-key + .md-typeset__scrollwrap td:first-child {
    text-align: center !important;
}

#api-status-key + .md-typeset__scrollwrap th {
    display: none;
}

/* Success stories */
.success-story-icon {
    border-radius: 0.85rem;
    width: 30px;
    margin-right: 1rem;
}

.success-story-screenshot img {
    width: 5rem;
    float: left;
    margin-right: 2rem;
}

.success-story {
    margin-bottom: 1.5rem;
}

.success-story-content {
    display: flow-root;
}

.success-story > h2 {
    display: flex;
    align-items: center;
}