#dashboard {
    .full-width main {
        margin: 0 auto;
        text-align: center;
    }

    @include sans-serif;
}

.metric {
    height: 10em;
    min-width: 240px;
    padding: 0 20px 10px 20px;
    margin: 10px 10px 20px 10px;
    border: 1px solid var(--hairline-color);
    border-radius: 4px;
    display: inline-block;
    position: relative;

    h3 {
        padding: 10px 15px;
        margin: 0 -20px;
        @include font-size(20);
        font-weight: 400;
        display: block;
        text-align: left;
        color: var(--body-fg);

        a {
            color: var(--link-color);

            &:visited {
                color: var(--text-l10);
            }

            &:active,
            &:focus,
            &:hover {
                color: var(--text-l20);
            }
        }
    }

    .value {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 80%;
        padding: 0;
        margin: 0;
        text-align: center;
        font-size: 5em;
        line-height: 1.4em;
        font-weight: 200;
        z-index: 10;
        pointer-events: none;

        a {
            color: var(--body-fg);
            text-decoration: none;
            pointer-events: auto;
            z-index: 10;

            &:visited {
                color: var(--text-l10);
            }

            &:active,
            &:focus,
            &:hover {
                color: var(--text-l20);
            }
        }

        .timestamp {
            font-size: 0.16em;
            font-weight: 400;
            line-height: 0.1em;
        }
    }

    .sparkline {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 54px;
        z-index: 1;
    }
}

.graph-wrapper {
    border-radius: 4px;
    border: 1px solid var(--hairline-color);
    padding: 20px;
    margin: 20px 0;
}

.graph {
    margin: 0 auto;
    width: 100%;
    height: 20em;
}
