// Main
.main
    display: flex
    
    width: 100%

    margin-top: 4rem
    padding: 0 5%
    
    @media screen and ( max-width: 820px )
        margin-top: 2rem

    .wrapper
        display: flex
        justify-content: space-between
        align-items: flex-start

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


// Section: Bills
.bills 
    @include column("half")

    @media screen and ( max-width: 820px )
        @include column("full")

        margin-top: 3rem
    
    &-header
        display: flex
        justify-content: space-between
        align-items: center

        padding: 0 0 1rem

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

        &-heading
            @include font("--big")

        &-actions
            display: flex

            &--filter
                display: flex
                justify-content: center
                align-items: center

                padding: .25rem

                border-radius: .25rem
                background-color: var(--gray)

                svg
                    width: 1.5rem
                    height: 1.5rem

                    fill: var(--light-gray)

            &--add
                display: flex
                justify-content: space-between
                align-items: center

                margin-left: .5rem
                padding: .25rem
                padding-left: .5rem

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

                border-radius: .25rem
                background-color: var(--blue)
                
                .hotkey
                    display: flex
                    align-items: center

                    margin-left: .5rem
                    padding: .25rem

                    border-radius: .25rem
                    background-color: rgba(255,255,255,.2)

        &-filters
            display: none


// Section: Transaction List
.tx-list
    display: flex
    flex-direction: column
    gap: 1.75rem

    padding: 1.5rem 0


// Section Overview
    //  Styles under sass/components/overview