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

.tradings {
    @include mixins.pageBase;
    &{
        display: block;
        width: 100%;
        height: 100vh;
        padding-left: 1.5rem !important;
        overflow-x: hidden !important;
    }

      //Tab section
      &__tab{
        background: variables.$col-active-btn-bg;
        border: 1px solid variables.$col-border-lining;
        border-radius: 6px;
        margin-bottom: 1rem;
        display: flex;
        // justify-content: space-between;
        // width: 50%;
        padding: .5rem .5rem;
        align-items: center;
        font-size: .8rem;
        font-weight: 600;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 20px;
        margin-top: 1rem;

        &--item{
            text-align: center;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            flex: 0 0 170px;
            color: variables.$col-white;

            @media only screen and (max-width: 1000px) {
                flex: 0 0 150px; 
                width: 100%;
                font-size: .75rem;
            }
            &--active{
                background: variables.$col-orange;
                color: variables.$col-dark;
                border-radius: 6px;
                padding: .5rem 1rem;
                cursor: pointer;
                font-size: .85rem;
                font-weight: 500;
                flex: 0 0 170px;
                text-align: center;

                @media only screen and (max-width: 1000px){
                    width: 100%;
                    flex: 0 0 180px; 
                    text-align: center;
                    font-size: .75rem;
                }
            }
        }
    }

    &__header {
        @include mixins.dashPageHeader;  
    }

    &__row{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;
        padding-bottom: .5rem;

        @media only screen and (max-width: 1000px) {
            grid-template-columns: 1fr;
            padding-bottom: 0 !important;
            grid-gap: 0;
        }
    }

    form {
        border: 1px solid variables.$col-active-btn-bg;
        padding: 2rem;
        border-radius: 10px;
        label {
            @include mixins.formLabel;
        }

        input {
            @include mixins.formInput;

            height: 3.3rem !important;
            font-weight: 500;
            font-size: .8rem;
            color: variables.$col-white !important;
            background: transparent !important;
        }
        input::placeholder {
            opacity: .7 !important;
            color: variables.$col-white !important;
        }

        select {
            @include mixins.formSelect;
            height: 3.3rem;
            font-weight: 500;
            font-size: .8rem;
            font-family: variables.$font;
            color: variables.$col-white;
            background: transparent !important;
        }

        input:focus-within {
            @include mixins.focusInput;
            
        }
        
        select:focus-within {
            @include mixins.focusInput
        }
    }

    &__buttons{
        display: flex;
        justify-content: space-between;
        gap: 30px;
        margin-top: .7rem;

        &--buy{
            background: variables.$col-success-color;
            color: #FFF;
            font-weight: 700;
            font-size: .9rem;
            padding: .9rem 1rem;
            border-radius: 5px;
            text-align: center;
            text-transform: uppercase;
            cursor: pointer;
            width: 100%;
        }

        &--sell {
            @extend .tradings__buttons--buy;
            background: variables.$col-danger-color;
        }
    }

    &{
        label {
            @include mixins.formLabel;
        }
        select {
        @include mixins.formSelect;
        width: 100%;
        // border: 2px solid variables.$col-primary-btn;

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