/* ==========================================================================
   Variables
   ========================================================================== */

.ts-blankslate {
    --accent-color: initial;
    --accent-foreground-color: initial;

    --padding: 3.5rem;
    --icon-size: var(--ts-font-size-55px);
    --header-font-size: var(--ts-font-size-17px);
    --description-font-size: var(--ts-font-size-15px);
    --header-distance: var(--ts-space-gap);
    --description-distance: 0.25rem;
    --icon-description-distance: var(--ts-space-gap);
}

/* ==========================================================================
   Base
   ========================================================================== */

.ts-blankslate {
    padding-bottom: var(--padding);
    padding-top: var(--padding);
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: center;
}

/* ==========================================================================
   Structure
   ========================================================================== */

.ts-blankslate > .ts-icon {
    font-size: var(--icon-size);
    color: var(--accent-color, var(--ts-gray-800));
    margin-top: 0.25rem;
    display: inline-block;
    line-height: 1;
}

.ts-blankslate .header {
    color: var(--accent-color, var(--ts-gray-800));
    font-size: var(--header-font-size);
    font-weight: 500;
    line-height: 1.6;
}

.ts-blankslate > .ts-icon + .header {
    margin-top: var(--header-distance);
}

.ts-blankslate > .ts-icon + .description {
    margin-top: var(--icon-description-distance);
}

.ts-blankslate .description {
    color: var(--ts-gray-500);
    font-size: var(--description-font-size);
    margin-top: var(--description-distance);
}

.ts-blankslate .action {
    margin-top: var(--ts-space-gap-large);
}

.ts-blankslate .action + .action {
    margin-top: var(--ts-space-gap);
}

/* ==========================================================================
   Variations
   ========================================================================== */

/**
 * Narrow
 */

.ts-blankslate.is-narrow {
    margin: 0 auto;
    max-width: 430px;
}

/**
 * Spacious
 */

.ts-blankslate.is-spacious {
    --padding: 3.5rem;
}

/**
 * Interactive
 */

.ts-blankslate.is-interactive {
    display: block;
    text-decoration: none;
}

.ts-blankslate.is-interactive:hover {
    cursor: pointer;
    background: var(--ts-gray-75);
}

/**
 * Secondary
 */

.ts-blankslate.is-secondary > .ts-icon {
    color: var(--ts-gray-500);
}
.ts-blankslate.is-secondary .header {
    color: var(--ts-gray-500);
}

/**
 * Sizes
 */

.ts-blankslate.is-small {
    --padding: 1.5rem;
    --icon-size: var(--ts-font-size-45px);
    --header-font-size: var(--ts-font-size-16px);
    --description-font-size: var(--ts-font-size-14px);
    --header-distance: var(--ts-space-gap-small);
    --description-distance: 0;
    --icon-description-distance: var(--ts-space-gap-small);
}

.ts-blankslate.is-large {
    --icon-size: var(--ts-font-size-65px);
    --header-font-size: var(--ts-font-size-18px);
    --header-distance: var(--ts-space-gap);
}
