@import '../core/theme.scss';

/* PLACEHOLDER */
/* Designed to be embedded in any parent container as placeholder when content is absent. */

.placeholder {
    background-color: transparentize($color: map-get($grays, '300'), $amount: 0.5);
    border-radius: 3px;
    text-align: center;
    padding: 3rem 2rem;
    color: map-get($grays, '700'); /* Lighter than original text color */
    display: block;

    .placeholder-icon {
        text-align: center;
    }

    .placeholder-title,
    .placeholder-subtitle {
        margin: 1rem auto;
    }

    .placeholder-subtitle {
        opacity: 0.7;
        margin: 0;
    }

    /* Place buttons here for the placeholder */
    .placeholder-commands {
        margin-top: 1rem;
    }
}