<commit_before>import styled from 'styled-components'

export const Wrapper = styled.div`
  width: 100vw;
  height: 70vh;
  position: relative;
  overflow: hidden;
`;

export const ControlBar = styled.div`
  width: 100%;
  position: absolute;
  bottom: 0;
  transform: ${props => props.visible ? 'translateY(0)' : 'translateY(100%) translateY(-5px)'};
  transition: transform 0.2s;
`;

export const Progress = styled.div`
  cursor: ew-resize;
  width: 100%;
  height: ${props => props.extend ? '15' : '5'}px;
  background-color: rgba(0, 0, 0, 0.5);
  transition: height 0.2s;
`;

export const ProgressFilled = styled.div`
  background-color: #2196F3;
  height: 100%;
  width: ${props => Math.ceil(props.played * 10000) / 100}%;
  box-sizing: border-box;
  border-right: 2px solid #2196F3;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  ${props => props.played === 0 ? 'border: none' : ''};
`;

export const Time = styled.div`
  height: 100%;
  display: flex;
  align-items: center;
  color: #FFF;
`;

export const Controls = styled.div`
  background: #000;
  width: 100%;
  display: flex;
  align-items: center;
  height: 35px;
`;

export const Toggle = styled.img`
  width: 30px;
  height: 100%;
  cursor: pointer;
  color: #FFF;
  border: none;
  background: transparent;
  font-size: 20px;
  display: flex;
  align-items: center;
  margin-right: 10px;

  &:focus {
    outline: none;
  }
`;

export const Volume = styled.input`
  -webkit-appearance: none;
  background: transparent;
  float: right;
  color: #FFF;
  border: none;
  margin-left: auto;
  margin-right: 10px;

  &:focus {
    outline: none;
  }
  &::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: #FFF;
    box-sizing: border-box;
    border-radius: 2px;
  }
  &::-webkit-slider-thumb {
    border: 1px solid #FFF;
    background-color: #000;
    box-sizing: content-box;
    height: 16px;
    width: 3px;
    margin-top: -5px;
    cursor: pointer;
    -webkit-appearance: none;
  }
`;

export const PrevButton = styled.img`
  width: 50px;
  cursor: pointer;
  user-select: none;
  color: #FFF;
  font-size: 60px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: ${props => props.visible ? 'translateX(0)' : 'translateX(-100%)'};
  transition: transform .2s;
`;

export const NextButton = styled.img`
  width: 60px;
  cursor: pointer;
  user-select: none;
  color: #FFF;
  font-size: 60px;
  position: absolute;
  top: 50%;
  right: 0;
  transform: ${props => props.visible ? 'translateX(0)' : 'translateX(100%)'};
  transition: transform .2s;
`;<commit_msg>fixed some styling on player<commit_after>import styled from 'styled-components'

export const Wrapper = styled.div`
  width: 100vw;
  height: 70vh;
  position: relative;
  overflow: hidden;
  user-select: none;
`;

export const ControlBar = styled.div`
  width: 100%;
  position: absolute;
  bottom: 0;
  transform: ${props => props.visible ? 'translateY(0)' : 'translateY(100%) translateY(-5px)'};
  transition: transform 0.2s;
`;

export const Progress = styled.div`
  cursor: ew-resize;
  width: 100%;
  height: ${props => props.extend ? '15' : '5'}px;
  background-color: rgba(0, 0, 0, 0.5);
  transition: height 0.2s;
`;

export const ProgressFilled = styled.div`
  background-color: #2196F3;
  height: 100%;
  width: ${props => Math.ceil(props.played * 10000) / 100}%;
  box-sizing: border-box;
  border-right: 2px solid #2196F3;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  ${props => props.played === 0 ? 'border: none' : ''};
`;

export const Time = styled.div`
  height: 100%;
  display: flex;
  align-items: center;
  color: #FFF;
  cursor: default;
`;

export const Controls = styled.div`
  background: #000;
  width: 100%;
  display: flex;
  align-items: center;
  height: 35px;
`;

export const Toggle = styled.img`
  width: 30px;
  height: 100%;
  cursor: pointer;
  color: #FFF;
  border: none;
  background: transparent;
  font-size: 20px;
  display: flex;
  align-items: center;
  margin-right: 10px;

  &:focus {
    outline: none;
  }
`;

export const Volume = styled.input`
  -webkit-appearance: none;
  background: transparent;
  float: right;
  color: #FFF;
  border: none;
  margin-left: auto;
  margin-right: 10px;

  &:focus {
    outline: none;
  }
  &::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: #FFF;
    box-sizing: border-box;
    border-radius: 2px;
  }
  &::-webkit-slider-thumb {
    border: 1px solid #FFF;
    background-color: #000;
    box-sizing: content-box;
    height: 16px;
    width: 3px;
    margin-top: -5px;
    cursor: pointer;
    -webkit-appearance: none;
  }
`;

export const PrevButton = styled.img`
  width: 50px;
  cursor: pointer;
  color: #FFF;
  font-size: 60px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: ${props => props.visible ? 'translateX(0)' : 'translateX(-100%)'};
  transition: transform .2s;
`;

export const NextButton = styled.img`
  width: 60px;
  cursor: pointer;
  color: #FFF;
  font-size: 60px;
  position: absolute;
  top: 50%;
  right: 0;
  transform: ${props => props.visible ? 'translateX(0)' : 'translateX(100%)'};
  transition: transform .2s;
`;
{'fraction_non_alphanumeric': 0.15562344853924, 'fraction_numerical': 0.04315447775443956, 'mean_word_length': 3.431472081218274, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 15, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4987116', 'n_tokens_mistral': 2130, 'n_tokens_neox': 1913, 'n_words': 496}