.recent_tx {
    .table_headers,
    .tx_row {
        grid-template-columns: 1fr 50px 225px calc(225px + 300px);
        display: grid;
        column-gap: 20px;
    }
}

.table_headers,
.tx_row {
    grid-template-columns: 150px 50px 225px 1fr;
    display: grid;
    column-gap: 20px;
}

.table_headers {
    padding-bottom: 7px;
    border-bottom: 1px solid #e7e7e7;

    p {
        font-weight: 500;
        font-size: 12px;
    }
}

.header_indent {
    padding-left: 12px;
}

.header_indent_sm {
    padding-left: 4px;
}

.tx_row {
    padding: 24px 0px;
    position: relative;

    flex-direction: row;
    align-items: center;
    font-size: 14px;
}

.info_col {
    display: flex;
    flex-direction: column;
    justify-items: center;
    overflow: auto;
}

// AVATAR
.avatar {
    width: 35px;
    height: 35px;
    border-radius: 35px;
    line-height: 35px;
    text-align: center;

    p {
        width: 100%;
        font-weight: 500;
        color: $primary-color;
        font-size: 16px;
        padding-left: 1px;
    }
}

// ID AND TIMESTAMP
.id {
    padding-left: 4px;
    padding-right: 14px;
    text-decoration: none;
    font-weight: 400;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    color: $black !important;
}

.time {
    padding-left: 4px;
    line-height: 140%;
    color: $black;
    font-size: 10px;
    word-break: keep-all;
    white-space: nowrap;
}

.tx_type_label {
    font-size: 10px;
    font-weight: 700;
    background: #f8f8f8;
    border: 1px solid #f0f7fe;
    border-radius: 50px;
    display: inline-block;
    margin-top: 4px;
    padding: 4px 8px;
    line-height: 1em;
    width: max-content;
}

// UTXOs
.utxo_list {
    border-radius: 5px;
}

.from,
.to {
    background: $background-color;
    padding: 20px;
    border-bottom: 2px solid $white;

    .label {
        font-weight: 400;
        width: 25px;
        padding: 6px 6px 4px 10px;
        opacity: 0.5;
        font-size: 10px;
        text-align: right;
        font-weight: 400;
        overflow: hidden;
    }

    .addr_container {
        line-height: 1.1em;
        display: flex;
        align-items: center;
        width: 100%;
        margin-bottom: 6px;

        &:last-of-type {
            margin-bottom: 0;
        }

        .addr {
            text-overflow: ellipsis;
            overflow: hidden;
            padding-left: 0;
            text-decoration: none;
            word-break: break-all;
            display: block;
            max-width: 250px;

            color: $black !important;

            &:hover {
                text-decoration: underline !important;
            }
        }
    }
}

.from {
    display: grid;
    grid-template-columns: auto;
    white-space: nowrap;
    overflow: hidden;
    padding-top: 22px;
    padding-bottom: 22px;

    .addr_container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .addr {
        flex: 1; /* consumes all free space (taking full height) */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}

.to {
    display: grid;
    grid-template-columns: 1fr max-content;
    column-gap: 10px;
    white-space: nowrap;
    overflow: hidden;
    padding: 20px;
    max-width: 500px;

    .addresses {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-overflow: ellipsis;
        overflow: hidden;
        line-height: 1em;
        box-sizing: content-box;
    }

    .amount {
        display: flex;
        flex-direction: row;
        align-items: center;

        .value {
            line-height: 1em;
            padding-bottom: 2px;
            font-weight: 500;
            font-size: 16px;

            .leftover {
                opacity: 0.1;
            }
        }

        .symbol {
            margin-left: 5px;
            letter-spacing: 0.01em;
            width: 44px;
            text-align: left;
        }
    }
}
@include smOrSmaller {
    .recent_tx {
        .table_headers,
        .tx_row {
            padding: 24px 4px;
            grid-template-columns: none;
            grid-template-rows: max-content max-content max-content max-content;
        }

        .table_headers {
            display: none;
        }
    }

    .table_headers,
    .tx_row {
        padding: 24px 4px;
        grid-template-columns: none;
        grid-template-rows: max-content max-content max-content max-content;
    }

    .table_headers {
        display: none;
    }

    .tx_row {
        padding: 8px 0;
    }

    .from,
    .to {
        padding: 8px;

        .label {
            width: unset;
            padding-left: 0;
        }
    }

    .to {
        max-width: none;
    }

    .avatar {
        display: none;
    }

    .id_col {
        display: flex;
        align-items: baseline;
        a {
            flex-grow: 1;
        }
    }

    .type {
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .id {
        width: 100%;
        margin-bottom: 4px;
    }

    .time {
        line-height: 11px;
    }

    .utxo_out {
        margin-bottom: 2px;
    }

    .from {
        margin-bottom: 0;

        .addr {
            padding-left: 0;
        }
    }

    .amount {
        // font-size: 12px;

        span {
            // font-size: 12px;
            font-weight: 700;
        }
    }
}
