.TrackParticipantRow {
    flex-direction: row;

    .FormField-label {
        display: none;
    }

    .FormField-group-has-error {
        &::before {
            display: none;
        }
    }

    &-table-cell {
        padding: 5px 4px;
        vertical-align: middle;

        .form-group {
            margin-bottom: 0;
        }
    }

    &-remove-button {
        height: 30px;
        padding: 5px;
        width: 30px;
        opacity: 0!important;

        .TableRowDraggable-hover & {
            opacity: 1!important;
        }

        svg {
            fill: var(--parrot);
        }

        &-disabled {
            svg {
                fill: var(--gray-500);
            }
        }
    }


    .Select {
        // We need to use above BEM naming style only due to react-select@v3's inner styling naming
        &__control {
            cursor: pointer;
        }

        &__option {
            cursor: pointer;
        }
    }
}