.dashboard {
    @apply flex flex-col h-full overflow-auto;

    /* Change card styles */
    & > div {
        @apply p-0 h-full flex flex-col;
    }

    & .aw-chart {
        @apply mt-4;
    }

    & &__title {
        @apply flex justify-between items-center mb-1 mt-4 px-4 font-heading font-bold text-mono-50 leading-none tracking-wide;
    }

    & &__subtitle {
        @apply text-mono-400 leading-none tracking-wide px-4 text-sm mb-1;
    }

    & &__description {
        @apply mb-0 px-4 text-mono-400 text-sm leading-snug font-body font-bold truncate;
    }

    & &__counter-wrapper {
        @apply absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        &.is-bottom {
            bottom: 0;
            top: unset;
            transform: translateX(-50%);
        }
    }

    & &__counter {
        @apply flex items-center px-4 text-4xl leading-snug font-heading text-mono-100 font-bold;

        .aw-icon {
            @apply text-2xl ml-3;
        }
    }

    & &__counter-wrapper &__counter {
        @apply block text-center leading-none text-3xl;
    }

    & &__content {
        @apply mb-4;
    }

    & &__chart {
        @apply flex-shrink-0 text-center flex-auto ml-8 pr-6 mb-4;
        /* min-width: 240px; */
    }

    & &__legend {
        @apply mb-0 overflow-auto text-xs px-4 pt-4 pb-0;
        max-height: 152px;

        /* Fix for no bottom padding on scroll in Firefox & IE */
        &::after {
            content: "";
            display: block;
            height: 1rem;
            width: 100%;
        }

        &_shadow {
            @apply absolute overflow-hidden w-full;
            overflow: hidden;
            box-shadow: 0 0 1rem theme('colors.overlay');
            transition: opacity 100ms;
            backface-visibility: hidden;
            will-change: opacity;
            height: 2px;

            &_top {
                top: -5px;
                border-radius: 0 0 100% 100%;
            }

            &_bottom {
                bottom: -5px;
                border-radius: 100% 100% 0 0;
            }
        }

        &_difference {
            @apply ml-1 flex items-center justify-end;
            min-width: 3rem;

            .aw-icon {
                @apply text-xs ml-1;
            }
        }
    }

    & .chart-wrapper {
        @apply relative mx-auto px-4;
        min-width: 100px;
        max-width: 236px;
        width: 100px;
    }

    &.is-wide .chart-wrapper {
        width: 236px;
    }

    &.is-wide .left-col {
        flex-grow: 1;
        max-width: 330px;
        flex-basis: 100%;
    }

    &__has-chart &__content {
        @apply flex items-center justify-between;
    }

    &__has-chart &__counter-wrapper &__counter {
        @apply text-base;
    }

    &__has-chart.is-wide &__counter-wrapper &__counter {
        @apply text-3xl;
    }

    &__has-chart.counter-hidden &__content {
        @apply justify-center;
    }

    &__has-chart .image {
        @apply absolute hidden;
        top: 50%;
        left: 50%;
        transform: translate(-40%, -55%);
    }

    &__has-chart.is-wide .image {
        @apply block;
    }

    /* Donut */
    &-donut .chart-wrapper {
        min-width: 300px;
        width: 300px;
    }

    /* Progress */

    &-progress .chart-wrapper {
        width: 100px;
    }

    &-progress.is-wide .chart-wrapper {
        width: 236px;
    }

    /* Speed */
    &-speed .chart-wrapper {
        max-width: 135px;
        width: 135px;
    }

    &-speed.is-wide .chart-wrapper {
        max-width: 180px;
        width: 180px;
    }

    .speed-arrow {
        @apply absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;

        svg {
            width: 100%;
            height: 100%;
            /* min-width: 100px;
            min-height: 100px; */
        }
    }

    /* Section */

    &-section .chart-wrapper {
        @apply px-0 mt-8;
        width: 100%;
        max-width: 100%;
    }

    &-section &__content {
        @apply mb-0;
    }
}

@media (min-width: 1400px) {
    .dashboard {
        overflow: hidden;
    }
}