import {StyleSheet} from 'react-native';

export const PLAYER_THUMB_SIZE = 8;

export const styles = StyleSheet.create({
  /** Fills the parent row (e.g. 40px) so the wave can be vertically centered with the play control. */
  container: {
    alignSelf: 'stretch',
    flexGrow: 1,
    height: '100%',
    justifyContent: 'center',
  },
  svgClip: {
    alignSelf: 'stretch',
    flexGrow: 1,
    height: '100%',
    overflow: 'hidden',
  },
  svg: {
    height: '100%',
    width: '100%',
  },
  waveformWrapper: {
    alignSelf: 'center',
    height: '100%',
    maxWidth: '100%',
    overflow: 'hidden',
    width: '100%',
  },
  thumb: {
    borderRadius: 100,
    height: PLAYER_THUMB_SIZE,
    left: 0,
    position: 'absolute',
    width: PLAYER_THUMB_SIZE,
    zIndex: 2,
  },
});
