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

.trading {
    @include mixins.dashPageComponent;
    margin-top: 0;

    p{
        font-size: .85rem !important;
    }

    form {
        padding: 0 .5rem;
        label {
            @include mixins.formLabel;
            color: variables.$col-secondary;
        }

        input {
            @include mixins.formInput;
            height: 2.7rem;
            font-weight: 600;
            font-size: .75rem;
            color: variables.$col-secondary !important;
        }

        select {
            @include mixins.formSelect;
            height: 2.7rem;
            font-weight: 600;
            font-size: .75rem;
            font-family: variables.$font;
            color: variables.$col-secondary;
        }
    }

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

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

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