.invoice-small {
    display: flex;
    gap: 4px;
}

    .invoice-small > div:nth-child(1) {
        background-color: var(--text-color);
        color: var(--gray-bg);
        height: var(--pill-h);
        border-radius: calc(var(--pill-h)/2) 0 0 calc(var(--pill-h)/2);
        flex-shrink: 0;
        flex-grow: 0;
        font-weight: 700;
        display: flex;
        align-items: center;
        padding: 0 var(--medium-gap);
        box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.12);
    }

    .invoice-small > div:nth-child(2) {
        background-color: var(--gray-bg);
        min-height: var(--pill-h);
        border-radius: 0 calc(var(--pill-h)/2) calc(var(--pill-h)/2) 0;
        flex-shrink: 0;
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content:space-between;
        gap: var(--medium-gap);
        padding-left: var(--medium-gap);
        box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.12);
    }

    .invoice-small:hover > div:nth-child(1) {
        box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 10px 20px rgba(0,0,0,.12);
    }

    .invoice-small:hover > div:nth-child(2) {
        box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 10px 20px rgba(0,0,0,.12);
    }

        .invoice-small > div:nth-child(2) > div {
            flex-shrink: 0;
            flex-grow: 0;
            display: flex;
            align-items: center;
        }

            .invoice-small > div:nth-child(2) > div > span:nth-child(1){
                margin-right: var(--pill-gap);
            }

.icon-invoice {
    background-color: var(--white-bg);
    width: calc(var(--pill-h) - 8px);
    height: calc(var(--pill-h) - 8px);
    border-radius: 50%;
    margin: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .icon-invoice:hover {
        box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.12);
    }