@keyframes toggleModal
    0% 
        opacity: 0

    100%
        opacity: 1

.modal-wrapper
    position: fixed
    top: 0
    left: 0
    z-index: 999

.add-bills-modal
    position: fixed
    top: 0
    right: 0
    bottom: 0
    left: 0

    z-index: 99

    display: none
    justify-content: center
    align-items: center

    width: 100%
    height: 100%

    visibility: hidden
    opacity: 0

    @media screen and ( max-width: 560px )
        align-items: flex-start
        padding: 5%
    
    &.open
        display: flex
        visibility: visible

        animation-name: toggleModal
        animation-fill-mode: forwards
        animation-direction: normal
        animation-duration: 320ms


.close-modal
    position: absolute
    top: 0
    right: 0
    bottom: 0
    left: 0

    z-index: 1

    background-color: rgba(0,0,0,.5)

.add-bills
    position: relative
    z-index: 2
    overflow: hidden

    width: 100%
    max-width: 32rem
    min-width: 18rem

    border-radius: .5rem
    background-color: var(--white)


    &-header
        position: relative

        display: flex
        flex-direction: column

        padding: 1rem 1.5rem 2rem

        border-radius: .5rem
        background-color: var(--blue)

        .close-modal-button
            position: absolute
            top: .75rem
            right: .75rem

            display: none
            justify-content: center
            align-items: center

            width: 1.375rem
            height: 1.375rem

            padding: 0

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

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

            svg
                width: 1rem
                height: 1rem

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

            opacity: .7

        &-input
            display: flex
            flex-direction: column
            align-items: center

            margin-top: 1rem
            
            .label
                color: var(--white)
                opacity: .7

            .input
                width: 100%

                margin-top: .5rem

                border-radius: .5rem
                background-color: transparent
                
                @media screen and ( max-width: 560px )
                    font-size: 2.5rem

                &::placeholder
                    color: var(--white)
                    opacity: .6
                
                &:focus
                    background-color: rgba(255, 255, 255, .2)
                    
                &:focus-visible
                    outline: none


    &-details
        display: flex
        flex-direction: column

        padding: 2rem 1.5rem

    &-actions
        display: flex
        justify-content: space-between

        padding: 2rem 1.5rem 2rem

        border-top: 1px solid var(--faded-white)
        
        @media screen and ( max-width: 560px )
            flex-direction: column
            gap: 1rem
            
            .submit
                width: 100%