.blankslate {
    padding: $blankslate-padding;
    color: var(--title-text-color);
    font-weight: var(--main-font-regular);
    text-align: center;
    background-color: var(--grey-20);
    border: 1px solid var(--grey-40);
    border-radius: $border-radius;

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin: $blankslate-margin auto $blankslate-title-margin-bottom auto;
    }

    p {
        max-width: $blankslate-description-width;
        margin: 0 auto $blankslate-paragraph-margin-bottom auto;
    }

    &.mod-small {
        padding: $blankslate-padding-small;

        h1 {
            margin-top: $blankslate-small-h1-margin-top;
            margin-bottom: $blankslate-margin;
            font-size: $blankslate-small-h1-font-size;
        }

        p {
            margin-bottom: $blankslate-small-p-margin-bottom;
            font-size: $blankslate-small-p-font-size;
        }
    }

    // deprecated use .mod-error instead
    &.mod-danger {
        background-color: rgb(var(--deprecated-red-rgb) / $transparency-5);
        border-color: var(--critical-70);

        h1,
        p {
            color: var(--critical-70);
        }
    }

    &.mod-error {
        background-color: rgb(var(--deprecated-tango-rgb) / $transparency-5);
        border-color: var(--deprecated-red);

        h1 {
            color: var(--deprecated-red);

            svg {
                fill: currentcolor;
            }
        }
    }
}