text: // @flow
  
  import { ColorSchemeRegistry, schemeColor } from '../../../base/color-scheme';
  import { BoxModel, ColorPalette } from '../../../base/styles';
  
  const BUTTON_SIZE = 60;
  
  // Toolbox, toolbar:
  
  /**
   * The style of toolbar buttons.
   */
  const toolbarButton = {
      borderRadius: 30,
      borderWidth: 0,
      flex: 0,
      flexDirection: 'row',
      height: BUTTON_SIZE,
      justifyContent: 'center',
      marginHorizontal: 6,
      marginTop: 6,
      width: BUTTON_SIZE,
      backgroundColor: 'rgba(115, 115, 115, 0.4)'
  };
  
  /**
   * The icon style of the toolbar buttons.
   */
  const toolbarButtonIcon = {
      alignSelf: 'center',
      color: ColorPalette.darkGrey,
      fontSize: 28
  };
  
  
  /**
   * The icon style of toolbar buttons which display white icons.
   */
  const whiteToolbarButtonIcon = {
      ...toolbarButtonIcon,
      color: ColorPalette.white
  };
  
  /**
   * The Toolbox and toolbar related styles.
   */
  const styles = {
  
      expandMenuContainer: {
          alignItems: 'center',
          borderTopLeftRadius: 16,
          borderTopRightRadius: 16,
          flexDirection: 'column'
      },
  
      sheetGestureRecognizer: {
          alignItems: 'stretch',
          flexDirection: 'column'
      },
  
      /**
       * The style of the toolbar.
       */
      toolbox: {
          alignItems: 'center',
          backgroundColor: 'transparent',
          borderTopLeftRadius: 3,
          borderTopRightRadius: 3,
          flexDirection: 'row',
          flexGrow: 0,
          justifyContent: 'space-around',
          paddingHorizontal: BoxModel.margin,
          paddingVertical: 20
      },
  
      /**
       * The style of the root/top-level container of {@link Toolbox}.
       */
      toolboxContainer: {
          flexDirection: 'column',
          flexGrow: 0,
          width: '100%',
          maxWidth: 500,
          marginLeft: 'auto',
          marginRight: 'auto'
      }
  };
  
  export default styles;
  
  /**
   * Color schemed styles for the @{Toolbox} component.
   */
  ColorSchemeRegistry.register('Toolbox', {
      /**
       * Styles for buttons in the toolbar.
       */
      buttonStyles: {
          iconStyle: toolbarButtonIcon,
          style: toolbarButton
      },
  
      buttonStylesBorderless: {
          iconStyle: whiteToolbarButtonIcon,
          style: {
              ...toolbarButton
          }
      },
  
      backgroundToggle: {
          backgroundColor: ColorPalette.toggled
      },
  
      hangupButtonStyles: {
          iconStyle: whiteToolbarButtonIcon,
          style: {
              ...toolbarButton,
              backgroundColor: schemeColor('hangup'),
              marginBottom:12,
              alignSelf:'center'
          },
          underlayColor: ColorPalette.buttonUnderlay
      },
  
      /**
       * Styles for toggled buttons in the toolbar.
       */
      toggledButtonStyles: {
          iconStyle: whiteToolbarButtonIcon,
          style: {
              ...toolbarButton
          }
      }
  });
  