@import '_vars';
@import '_mixins';

.dashboard {
    & {
        @include absolute(0, 0, 0, 0);
        overflow-y: auto;
    }

    &-title {
        font-size: 1.4rem;
    }

    &-inner {
        padding: 2rem;
        padding-right: 1rem;
        max-width: 75rem;
    }
}

.subtext {
    margin-bottom: 2rem;
}

:host ::ng-deep {
    canvas {
        height: 12rem !important;
        margin-top: -1rem;
        margin-bottom: 0;
    }
}

.card {
    & {
        margin-right: 1rem;
        margin-bottom: 1rem;
        width: 16rem;
        min-height: 16rem;
        max-height: 16rem;
        float: left;
    }

    &-lg {
        width: 33rem;
    }

    &-image {
        text-align: center;
    }

    &-history {
        overflow-y: auto;
    }

    &-text {
        color: $color-text-decent;
        font-weight: normal;
        font-size: .9rem;
    }

    &-title {
        color: $color-title;
        font-weight: light;
        font-size: 1.2rem;
        margin-top: 1rem;
    }

    &-href {
        & {
            cursor: pointer;
        }

        &:hover {
            @include box-shadow(0, 3px, 16px, .2px);
        }

        &:focus {
            outline: none;
        }

        &:hover,
        &:focus,
        &:active {
            text-decoration: none;
        }
    }
}

.aggregation {
    & {
        text-align: center;
    }

    &-label {
        color: $color-text-decent;
    }

    &-value {
        font-size: 3rem;
        margin-top: 1rem;
        margin-bottom: .5rem;
    }
}