.overview
    position: sticky
    top: 2rem
    
    @include column("half")

    padding: 1rem 1.5rem 2rem

    border: 1px solid var(--dark-gray)
    border-radius: .5rem

    @media screen and ( max-width: 815px )
        position: relative
        
        @include column("full")
        flex-direction: row
        flex-wrap: wrap
        justify-content: space-between

    @media screen and ( max-width: 720px )
        flex-direction: column

    // Overview Header
    &-header
        display: flex
        justify-content: space-between
        align-items: center

        @include font("--small", "--white")

        @media screen and ( max-width: 815px )
            width: 100%

        &-heading
            @include font(false, "--light-gray")

    &-label
        @include font("--small", "--light-gray")
    
    &-total
        display: flex
        flex-direction: column

        margin-top: 3rem
        padding-bottom: 1rem

        border-bottom: 1px solid var(--dark-gray)

        @media screen and ( max-width: 815px )
            width: 100%

        &-details
            display: flex
            align-items: center

            margin-top: .25rem

        &-amount
            @include font("--big")
        
        &-percent
            --size: 2.25rem
            --margin: auto
            // View pie.sass


    &-spenders,
    &-categories
        display: flex
        flex-direction: column

        margin-top: 1.5rem

        @media screen and ( max-width: 815px )
            width: 46%

        @media screen and ( max-width: 720px )
            width: 100%

        &-list
            display: flex
            flex-direction: column

            margin-top: .25rem

    &-spender,
    &-category
        display: flex
        justify-content: space-between

        padding: .25rem 0

        &-details
            display: flex
            align-items: center

            &.--right-align
                justify-content: flex-end

        &-profile
            position: relative
            display: flex
            justify-content: center
            align-items: center
            overflow: hidden

            width: 1.75rem
            height: 1.75rem

            border-radius: 50%
        
            background-color: var(--light-gray)
            background-size: 1.25rem
            background-position: center
            background-repeat: no-repeat

            &.--home
                background-color: var(--dark-yellow)
                background-image: url('/icons/icon--home.svg')
                    
            &.--credit-card
                background-color: var(--dark-blue)
                background-image: url('/icons/icon--credit-card.svg')
            
            &.--utilities
                background-color: var(--dark-green)
                background-image: url('/icons/icon--utilities.svg')
            
            &.--health
                background-color: var(--dark-red)
                background-image: url('/icons/icon--health.svg')
            
            &.--miscellaneous 
                background-color: var(--dark-sky)
                background-image: url('/icons/icon--misc.svg')

            &-img
                width: 100%
                height: 100%
                object-fit: cover
        
        &-name,
        &-amount
            @include font("--small", "--white")
        
        &-name
            margin-left: .5rem

        &-percent
            // View pie.sass
            --size: 1.375rem
            --margin: .5rem