.activity-page {
    --accent: #9AB646;
    --danger: #e02d2d;

    --available: #ffe45b;
    --break: #86be7d;
    --rest: #c2debe;
    --driving: #b2b7e8;
    --work: #4286f5;
    --unknown: #b2b7e8;

    .activities {
        background-color: var(--background) !important;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;

        text-wrap: nowrap;

    }

    section {
        margin-top: 1.5rem;
    }

    i.pa {
        color: var(--accent);

        &::before {
            vertical-align: middle;
        }
    }

    .skeleton {
        min-height: 25rem;

        &:empty {
            background: linear-gradient(90deg,
                    var(--background) 25%,
                    var(--light) 50%,
                    var(--background) 75%);
            background-size: 200% 100%;
            animation: skeleton-loading 3s infinite;
        }
    }

    .view-toggle {
        display: flex;
        align-items: center;
        gap: 0.5rem;

        input {
            display: none;

            &+label {
                padding: 0.5rem 1rem;
            }

            &:checked+label {
                background-color: var(--primary);
                color: var(--light);
            }
        }

    }

    .activity-bar {
        border-radius: 2px 2px 0 0;

        &::hover {
            filter: var(--highlight);
        }
    }

    .activity-bar--available {
        background-color: var(--available);
        height: 2rem;
    }

    .activity-bar--break {
        background-color: var(--break);
        height: 2rem;
    }

    .activity-bar--rest {
        background-color: var(--rest);
        height: 1.5rem;
        box-sizing: border-box;
        border: 0.1rem solid var(--rest);
        background-image: repeating-linear-gradient(135deg,
                rgba(255, 255, 255, 0.5),
                rgba(255, 255, 255, 0.5) 1px,
                transparent 1px,
                transparent 10px);
    }

    .activity-bar--driving {
        background-color: var(--driving);
        height: 5rem;
    }

    .activity-bar--work {
        background-color: var(--work);
        height: 4rem;
    }

    .activity-bar--unknown {
        background-color: var(--unknown);
        height: 1.5rem;
    }

    .text-accent {
        color: var(--accent);
    }
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* .pa {
    display: inline-block;
    width: 1.5rem !important;
    height: 1.5rem !important;
    font-size: 1rem !important;
    line-height: 1.5rem !important;
    text-align: center;
    vertical-align: middle;
} */