/* define BlankSlate */

.BlankSlate {
    max-width: 700px;
    margin: 1.5rem auto;
    max-height: 100%;
}

.BlankSlate-image {
    width: 200px;
    height: 170px;
    margin: 0 auto;
    display: block;
}

.BlankSlate-icon {
    display: block;
    font-size: 30px;
    color: var(--icon-subtle);
}

.BlankSlate-body {
    margin-top: 1.5rem;
}

.BlankSlate-text {
    margin-top: 1.5rem;
    color: var(--text-default);
}

.BlankSlate-subText {
    color: var(--text-subtle);
    font-size: var(--font-size-medium);
    margin-top: 12px;
}

.BlankSlate-action {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}

.BlankSlate--lightGrey {
    background-color: var(--surface-subtle-light);
    border: solid 1px var(--border-subtle);
}

.BlankSlate--light {
    background-color: var(--surface-default);
    border: 1px solid var(--border-subtle);
}

/* Sits inside a smaller region (e.g. one wing of a chart) rather than filling a
   page or a whole widget: centred in the space it is given, with the icon and
   message pulled tight together. */
.BlankSlate--compact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--padding-sm);
    height: 100%;
    max-width: 100%;
    margin: 0;
    padding: var(--padding-md);
}

.BlankSlate--compact .BlankSlate-icon {
    height: 35px;
    width: 40px;
}

.BlankSlate--compact .BlankSlate-body {
    margin-top: 0;
}

.BlankSlate--compact .BlankSlate-text {
    margin-top: 0;
    margin-bottom: 0;
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-regular);
    color: var(--text-subtle);
}

.BlankSlate--compact .BlankSlate-subText {
    margin-top: 4px;
}

/* No action slot content in the compact layout, so don't reserve space for it. */
.BlankSlate--compact .BlankSlate-action:empty {
    display: none;
}