@use "../../../../styles/abstracts/mixins";  
@use "../../../../styles/abstracts/variables";

.single__tns {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: .8rem;
    border-bottom: 1px solid variables.$col-active-btn-bg;
    padding-bottom: .5rem;

    &--left {
        display: flex;
        gap: 10px;
        align-items: center;

        &--credit {
            background: variables.$col-success-bg;
            color: variables.$col-success-color;
            height: 35px;
            width: 35px;
            border-radius: 5px;
            display: flex;
            font-size: .85rem;
            font-weight: 600;
            align-items: center;
            justify-content: center;
        }
        &--debit {
            @extend .single__tns--left--credit;
            background: variables.$col-danger-bg;
            color: variables.$col-danger-color;
        }
        &--text {
            h3{
                font-size: .75rem;
                color: variables.$col-secondary;
                font-weight: 600;
            }
            p{
                color: variables.$col-secondary;
                font-size: .7rem;
                opacity: .8;
            }
        }
    }

    &--right {
        font-weight: 600;
        font-size: .9rem;
        &--credit {
            color: variables.$col-success-color;
        }
        &--debit {
            color: variables.$col-danger-color;
        }
    }
}