Update picker's .scss to follow BEM convention (#43036)

packages/components/src/mobile/picker/index.android.js

@@ -19,8 +19,8 @@ import styles from './styles.scss';
 
 function Separator() {
 	const separatorStyle = usePreferredColorSchemeStyle(
-		styles.separator,
-		styles.separatorDark
+		styles[ 'components-picker__separator' ],
+		styles[ 'components-picker__separator--dark' ]
 	);
 
 	return <View style={ separatorStyle } />;
@@ -64,7 +64,10 @@ export default class Picker extends Component {
 					separatorType={ 'none' }
 					onPress={ () => this.onCellPress( option.value ) }
 					disabled={ option.disabled }
-					style={ option.disabled && styles.disabled }
+					style={
+						option.disabled &&
+						styles[ 'components-picker__button--disabled' ]
+					}
 				/>
 			</Fragment>
 		) );
@@ -81,7 +84,10 @@ export default class Picker extends Component {
 				hideHeader
 				testID={ testID }
 			>
-				<PanelBody title={ title } style={ styles.panelBody }>
+				<PanelBody
+					title={ title }
+					style={ styles[ 'components-picker__panel' ] }
+				>
 					{ this.getOptions() }
 					{ ! hideCancelButton && (
 						<TextControl

packages/components/src/mobile/picker/styles.native.scss

@@ -1,4 +1,4 @@
-.separator {
+.components-picker__separator {
 	margin-top: $grid-unit-20 * 0.5;
 	margin-bottom: $grid-unit-20 * 0.5;
 	margin-left: -$grid-unit-20;
@@ -7,15 +7,15 @@
 	background-color: $light-gray-400;
 }
 
-.separatorDark {
+.components-picker__separator--dark {
 	background-color: $gray-70;
 }
 
-.disabled {
+.components-picker__button--disabled {
 	opacity: 0.3;
 }
 
-.panelBody {
+.components-picker__panel {
 	padding-left: 0;
 	padding-right: 0;
 }