<commit_before>.customAudioPlayer{
    // background:$grey;
    border:.2em solid $grey;
    margin:2em 0;
    padding:.5em .5em .5em 3em;
    position:relative;
    border-radius:.5em;
}

.playerTrigger{
    border:none;
    appearance:none;
    width:2em;
    height:2em;
    font-size:1em;
    color:$white;
    background:$black;
    position:absolute;
    top:50%;
    left:.5em;
    border-radius:50%;
    margin-top:-1em;
    cursor:pointer;
    .buttonText{
        display:none;
    }
    &:focus{
        outline:none;
        box-shadow:$grey 0 0 0 .2em;
    }
    &:before{
        content:'';
        display:block;
        position:absolute;
        top:50%;
        left:50%;
        margin-top:-.5em;
        margin-left:-.2em;
        border-top:.5em solid transparent;
        border-left:.6em solid $white;
        border-bottom:.5em solid transparent;
        transition:border height margin top;
        transition-duration:.2s;
    }
    &:after{
        content:'';
        display:block;
        position:absolute;
        top:50%;
        right:50%;
        height:.8em;
        margin-top:-.4em;
        margin-right:-.3em;
        border-top:0;
        border-left:.3em solid $white;
        border-bottom:0;
        opacity:0;
        transition:opacity .2s;
    }
    &.songPlaying:before{
        height:.8em;
        margin-top:-.4em;
        margin-left:-.3em;
        border-top:0;
        border-left:.3em solid $white;
        border-bottom:0;
    }
    &.songPlaying:after{
        opacity:1;
    }
}

.metaWrapper{
    margin-bottom:.5em;
    .titleDisplay{
        font-weight:bold;
    }
}

.timingsWrapper{
    padding:0 4em;
    position:relative;
    font-size:.8em;
    .songPlayTimer,
    .songDuration{
        position:absolute;
        top:0;
        width:4em;
        text-align:center;
        background:$grey;
        line-height:2;
        height:2em;
    }
    .songPlayTimer{
        left:0;
        border-radius:.5em 0 0 .5em;
    }
    .songDuration{
        right:0;
        border-radius:0 .5em .5em 0;
    }
    .songProgressSliderWrapper{
        height:2em;
        font-size:1em;
        line-height:1;
        // background:$green;
        position:relative;
        background:$grey;
        overflow:hidden;
        .songProgressSlider{
            width:100%;
            padding:0;
            margin:0;
            position:absolute;
            top:0;
            left:0;
            // z-index:2;
            opacity:0;
        }
        .pseudoProgressIndicator{
            height:2em;
            position:absolute;
            top:0;
            left:0;
            background:#888;//grey;
            width:0%;
            // z-index:1;
        }
        .pseudoProgressPlayhead{
            width:2em;
            border-radius:50%;
            height:2em;
            position:absolute;
            top:50%;
            left:0%;
            margin-top:-1em;
            margin-left:-1em;
            background:white;
            border:.2em solid black;
            // z-index:1;
        }
    }
}




//
// The Track
//

input[type=range].songProgressSlider::-webkit-slider-runnable-track {
  width:100%;
  font-size:1em;
  height:2.2em;
  cursor:pointer;
  box-shadow:0;
  background:black;
  border-radius:0;
  border:0;
}

input[type=range].songProgressSlider::-moz-range-track {
  width:100%;
  height:2em;
  cursor:pointer;
  box-shadow:0;
  background:black;
  border-radius:0;
  border:0;
}

input[type=range].songProgressSlider::-ms-track {
  width:100%;
  height:2em;
  cursor:pointer;
  background:transparent;
  border-color:transparent;
  border-width:.5em 0;
  color:transparent;
}
input[type=range].songProgressSlider::-ms-fill-lower {
  background:black;
  border:0;
  border-radius:0;
  box-shadow:0;
}
input[type=range].songProgressSlider:focus::-ms-fill-lower {
  background:black;
}
input[type=range].songProgressSlider::-ms-fill-upper {
  background:black;
  border:0;
  border-radius:0;
  box-shadow:0;
}
input[type=range].songProgressSlider:focus::-ms-fill-upper {
  background:black;
}<commit_msg>slimming down native range styles<commit_after>.customAudioPlayer{
    // background:$grey;
    border:.2em solid $grey;
    margin:2em 0;
    padding:.5em .5em .5em 3em;
    position:relative;
    border-radius:.5em;
}

.playerTrigger{
    border:none;
    appearance:none;
    width:2em;
    height:2em;
    font-size:1em;
    color:$white;
    background:$black;
    position:absolute;
    top:50%;
    left:.5em;
    border-radius:50%;
    margin-top:-1em;
    cursor:pointer;
    .buttonText{
        display:none;
    }
    &:focus{
        outline:none;
        box-shadow:$grey 0 0 0 .2em;
    }
    &:before{
        content:'';
        display:block;
        position:absolute;
        top:50%;
        left:50%;
        margin-top:-.5em;
        margin-left:-.2em;
        border-top:.5em solid transparent;
        border-left:.6em solid $white;
        border-bottom:.5em solid transparent;
        transition:border height margin top;
        transition-duration:.2s;
    }
    &:after{
        content:'';
        display:block;
        position:absolute;
        top:50%;
        right:50%;
        height:.8em;
        margin-top:-.4em;
        margin-right:-.3em;
        border-top:0;
        border-left:.3em solid $white;
        border-bottom:0;
        opacity:0;
        transition:opacity .2s;
    }
    &.songPlaying:before{
        height:.8em;
        margin-top:-.4em;
        margin-left:-.3em;
        border-top:0;
        border-left:.3em solid $white;
        border-bottom:0;
    }
    &.songPlaying:after{
        opacity:1;
    }
}

.metaWrapper{
    margin-bottom:.5em;
    .titleDisplay{
        font-weight:bold;
    }
}

.timingsWrapper{
    padding:0 4em;
    position:relative;
    font-size:.8em;
    .songPlayTimer,
    .songDuration{
        position:absolute;
        top:0;
        width:4em;
        text-align:center;
        background:$grey;
        line-height:2;
        height:2em;
    }
    .songPlayTimer{
        left:0;
        border-radius:.5em 0 0 .5em;
    }
    .songDuration{
        right:0;
        border-radius:0 .5em .5em 0;
    }
    .songProgressSliderWrapper{
        height:2em;
        font-size:1em;
        line-height:1;
        // background:$green;
        position:relative;
        background:$grey;
        overflow:hidden;
        .songProgressSlider{
            width:100%;
            padding:0;
            margin:0;
            position:absolute;
            top:0;
            left:0;
            // z-index:2;
            opacity:0;
        }
        .pseudoProgressIndicator{
            height:2em;
            position:absolute;
            top:0;
            left:0;
            background:#888;//grey;
            width:0%;
            // z-index:1;
        }
        .pseudoProgressPlayhead{
            width:1em;
            // border-radius:50%;
            height:2em;
            position:absolute;
            top:50%;
            left:0%;
            margin-top:-1em;
            margin-left:-.5em;
            background:white;
            border:.2em solid black;
            // z-index:1;
        }
    }
}

// Make sure the range Track is the right size and shape
input[type=range].songProgressSlider::-webkit-slider-runnable-track {
  width:100%;
  font-size:1em;
  height:2.2em;
  cursor:pointer;
}
input[type=range].songProgressSlider::-moz-range-track {
  width:100%;
  height:2em;
  cursor:pointer;
}
input[type=range].songProgressSlider::-ms-track {
  width:100%;
  height:2em;
  cursor:pointer;
}
{'fraction_non_alphanumeric': 0.13137151865475566, 'fraction_numerical': 0.03152916447714135, 'mean_word_length': 1.7483754512635379, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, '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': '5001756', 'n_tokens_mistral': 2643, 'n_tokens_neox': 2508, 'n_words': 380}