text: import {
      BoxModel,
      ColorPalette,
      createStyleSheet,
      fixAndroidViewClipping
  } from '../../../base/styles';
  
  import { FILMSTRIP_SIZE } from '../../../filmstrip';
  
  export const NAVBAR_GRADIENT_COLORS = [ 'black', '#00000000' ];
  
  /**
   * The styles of the feature conference.
   */
  export default createStyleSheet({
      /**
       * {@code Conference} style.
       */
      conference: fixAndroidViewClipping({
          alignSelf: 'stretch',
          backgroundColor: ColorPalette.appBackground,
          flex: 1
      }),
  
      displayNameBackdrop: {
          alignSelf: 'center',
          backgroundColor: 'rgba(28, 32, 37, 0.6)',
          borderRadius: 4,
          margin: 16,
          paddingHorizontal: 16,
          paddingVertical: 4
      },
  
      displayNameText: {
          color: ColorPalette.white,
          fontSize: 14
      },
  
      gradient: {
          flex: 1
      },
  
      gradientStretch: {
          height: 116
      },
  
      /**
       * View that contains the indicators.
       */
      indicatorContainer: {
          flex: 1,
          flexDirection: 'row',
          justifyContent: 'flex-end',
          margin: BoxModel.margin
      },
  
      /**
       * Indicator container for wide aspect ratio.
       */
      indicatorContainerWide: {
          marginRight: FILMSTRIP_SIZE + BoxModel.margin
      },
  
      labelWrapper: {
          flexDirection: 'column',
          position: 'absolute',
          right: 0,
          top: 0
      },
  
      navBarButton: {
          iconStyle: {
              color: ColorPalette.white,
              fontSize: 24
          },
  
          underlayColor: 'transparent'
      },
  
      navBarContainer: {
          flexDirection: 'column',
          left: 0,
          position: 'absolute',
          right: 0,
          top: 0
      },
  
      navBarSafeView: {
          left: 0,
          position: 'absolute',
          right: 0,
          top: 0
      },
  
      navBarWrapper: {
          alignItems: 'center',
          flex: 1,
          flexDirection: 'row',
          height: 44,
          justifyContent: 'space-between',
          paddingHorizontal: 14
      },
  
      roomName: {
          color: ColorPalette.white,
          fontSize: 17,
          fontWeight: '400'
      },
  
      roomNameWrapper: {
          flexDirection: 'row',
          justifyContent: 'center',
          left: 0,
          paddingHorizontal: 48,
          position: 'absolute',
          right: 0
      },
  
      /**
       * The style of the {@link View} which expands over the whole
       * {@link Conference} area and splits it between the {@link Filmstrip} and
       * the {@link Toolbox}.
       */
      toolboxAndFilmstripContainer: {
          bottom: BoxModel.margin,
          flexDirection: 'column',
          justifyContent: 'flex-end',
          left: 0,
          position: 'absolute',
          right: 0,
  
          // Both on Android and iOS there is the status bar which may be visible.
          // On iPhone X there is the notch. In the two cases BoxModel.margin is
          // not enough.
          top: BoxModel.margin * 3
      }
  });
  