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

.recent__trade{
    grid-gap: 20px;
    display: grid;
    grid-template-columns: 150px 150px 1fr 2fr;
    padding-bottom: .2rem;
    border-bottom: 1px solid variables.$col-border-lining;
    margin-bottom: 1rem;
    padding-left: 1rem;
    cursor: pointer;
    // align-items: center;

    @media only screen and (max-width: 1000px) {
        grid-template-columns: 110px 100px 1fr 1fr;
        border-bottom: 1px solid variables.$col-border-lining;
    }

    &--details{
        h2{
            display: flex;
            align-items: center;
            padding-bottom: .5rem;
            font-size: .82rem !important;
            font-weight: 500 !important;
            color: variables.$col-white;
            @media only screen and (max-width: 1000px) {
                padding-bottom: .5rem;
            }
        }
        h3{
            padding-bottom: .5rem;
            font-size: .82rem !important;
            color: variables.$col-white;
            font-weight: 400 !important;
        }
    }

    &--amount {
        h2{
            padding-bottom: .5rem;
            font-size: .8rem;
            font-weight: 500;
            color: variables.$col-white;
        }

        &--buy {
            background: variables.$col-success-color;
            color: variables.$col-success-bg;
            padding: .3rem .7rem;
            border-radius: 50px;
            font-weight: 500 !important;
            font-size: .7rem !important;
            padding-bottom: .4rem !important;
        }

        &--sell {
            @extend .recent__trade--amount--buy;
            background: variables.$col-danger-color;
            color: variables.$col-danger-bg;
            padding-bottom: .4rem !important;
        }
    }

    &--status{
        h3{
            // padding-bottom: .5rem;
            font-size: .85rem !important;
            color: variables.$col-white;
            font-weight: 600 !important;
        }
        @media only screen and (max-width: 1000px) {
            display: flex;
            flex-direction: column;
        }
        small {
            font-weight: 400;
            font-size: .75rem;
            opacity: .8;
            color: variables.$col-white;
        }

        &--status {
            display: flex;
            gap: 10px;
            padding-bottom: .3rem;
            padding-top: .2rem;
            &--expired{
                background: variables.$col-success-color;
                color: variables.$col-success-bg;
                padding: .3rem .7rem;
                border-radius: 50px;
                font-weight: 500;
                font-size: .75rem;
            }
    
            &--active {
                @extend .recent__trade--status--status--expired
            }

            &--ongoing {
                @extend .recent__trade--status--status--expired; 
                background: variables.$col-orange; 
                color: variables.$col-dark
            }
    
            &--win {
                @extend .recent__trade--status--status--expired;
                background: variables.$col-success-bg;
                color: variables.$col-success-color;
                border-radius: 50px
            }
    
            &--loss {
                @extend .recent__trade--status--status--win;
                background: variables.$col-danger-bg;
                color: variables.$col-danger-color;
            }
        }
    }
}