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

.active__trades{
    @include mixins.dashPageComponent;
    & {
        padding-top: 2rem;
        margin-bottom: 1.5rem;
    }

    @media only screen and (max-width: 1000px) {
        padding: 1.5rem 1.5rem;
    }

    &__header{
        display: flex;
        justify-content: space-between;
        gap: 50px;
        @media only screen and (max-width: 1000px) {
            flex-direction: column;
            gap: 5px;
            margin-bottom: 2rem;
        }
    }

        //tab
        &__tab{
            background: variables.$col-active-btn-bg;
            border: 1px solid variables.$col-border-lining;
            border-radius: 6px;
            height: 3rem;
            display: flex;
            justify-content: space-between;
            width: 40%;
            padding: .3rem .4rem;
            align-items: center;
            font-size: .85rem;
            flex-wrap: nowrap;
            overflow-x: auto;
            color: variables.$col-white;
            @media only screen and (max-width: 1000px) {
                width: 100%;
                padding: .5rem .6rem !important;
            }
    
            &--item{
                // width: 50%;
                text-align: center;
                cursor: pointer;
                font-weight: 600;
                flex: 0 0 100px;
                font-size: .77rem;

                @media only screen and (max-width: 1000px) {
                    flex: 0 0 150px;
                }
                &--active{
                    background: variables.$col-orange;
                    color: variables.$col-dark;
                    border-radius: 6px;
                    padding: .5rem 1rem;
                    cursor: pointer;
                    font-size: .77rem;
                    font-weight: 500;
                    transition: all ease-in-out .5s;

                    &:hover {
                        background: #e66a00;
                    }

                    @media only screen and (max-width: 1000px) {
                        padding: .6rem 1rem;
                        font-size: .7rem;
                    }
                }
            }
        }

    &__table{
        background: variables.$col-active-btn-bg;
        border: 1px solid variables.$col-border-lining;
        border-radius: 6px;
        grid-gap: 20px;
        display: grid;
        color: variables.$col-white;
        grid-template-columns: 150px 150px 50px;

        @media only screen and (max-width: 1000px) {
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto;
            width: 100%;
            gap: 20px;
        }

        span {
            font-weight: 500;
            padding: .8rem 1rem;
            font-size: .8rem;
            @media only screen and (max-width: 1000px) {
            display: flex;
            flex-direction: column;
            flex: 0 0 140px;
            color: variables.$col-white;
            }
        }
    }

    &__children {
        margin-top: 2rem;
        overflow-x: scroll;

        @media only screen and (max-width: 1000px) {
            display: flex;
            flex-direction: column;
            flex: 0 0 340px;
            
        }
    }

    a{
        @include mixins.dashPagesButton;
        transition: all ease-in-out .5s;
        &:hover {
            background-color: #e66a00 !important;
            box-shadow: 0 0 6px rgba(255, 122, 0, 0.4);
        }

        @media only screen and (max-width: 1000px) {
            width: 100% !important;
        }
    }
}