@use "variables" as *;

.experiment-traffic-split__form-wrapper {
    padding: $spacing-5;

    form {
        display: flex;
        flex-direction: column;
    }

    label {
        font-weight: $font-weight-bold;
        font-size: $font-size-lmd;
    }

    .experiment-traffic-split__radio {
        display: flex;
        flex-direction: column;
        gap: $spacing-3;
    }

    .experiment-traffic-split__variants {
        margin-top: $spacing-5;

        > * {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: $spacing-2;
            min-height: 2.7rem;

            &.experiment-traffic-split__variants-header {
                font-size: $font-size-lmd;
                color: $color-palette-gray-700;
                text-transform: uppercase;
                font-weight: $font-weight-bold;
            }
        }

        .experiment-traffic-split__variants-name {
            min-width: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        span.experiment-traffic-split__variants-weight {
            padding: $spacing-2 $spacing-2;
        }

        .experiment-traffic-split__variants-weight,
        ::ng-deep.p-inputnumber-input {
            width: 60px;
            text-align: center;
        }
    }
}
