<commit_before>//
// Songs
// --------------------------------------------------


.song {
  position: relative;
}


// Song info

.song-title {
  margin-bottom: 0;
}

.song-meta {
  width: 64px;
  flex: 0 0 64px;
  margin-left: 30px;
}

.song-duration {
  line-height: 1.3 * $font-size-base*$line-height-base;
}


// Artist

.song-artists {
  list-style: none;
  padding: 0;
  color: $gray-light;
}

.song-artist {
  display: inline-block;

  + .song-artist:before {
    content: ', ';
  }
}


//
// Song Controls
// --------------------------------------------------

.song-controls {
  position: absolute;
  width: 100%;
  height: 250px;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  @include transition(opacity 0.3s ease);
}

.song-toggle,
.song-delete {
  background-color: #101010;
  border-radius: 50%;
  cursor: pointer;
  margin: 0 7px;
  height: 0;
  width: 0;
  opacity: 0;
  @include transition(opacity 0.3s ease, transform 0.3s ease-out, width 0.3s ease-out, height 0.3s ease-out);
  
  &:after {
    content:'';
    display: inline-block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50% 50%;
  }
}

.song-controls:hover {
  .song-toggle,
  .song-delete {
    height: 25%;
    width: 25%;
    opacity: .8;
    
    &:hover {
      opacity: 1;
      transform: scale(1.1);
    }
  }
}

.song-toggle:after {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="37px" height="37px"><path fill="#FFFFFF" d="M9.5 36.2c-2.2 1.2-4 0.2-4-2.4V3c0-2.5 1.8-3.4 3.8-2.1l26.2 16.6c2.1 1.4 2 3.4-0.2 4.6L9.5 36.2z"/></svg>');
  
  .isPlaying & {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="37px" height="37px"><path fill="#FFFFFF" d="M13 32.4V4.6c0-1.6-1.3-2.9-2.9-2.9H7C5.5 1.7 4.1 3 4.1 4.6v27.9c0 1.6 1.3 2.9 2.9 2.9h3C11.6 35.4 13 34.1 13 32.4z"/><path fill="#FFFFFF" d="M32.9 32.4V4.6c0-1.6-1.3-2.9-2.9-2.9h-3C25.4 1.7 24 3 24 4.6v27.9c0 1.6 1.3 2.9 2.9 2.9h3C31.5 35.4 32.9 34.1 32.9 32.4z"/></svg>');
  }
}

.song-delete:after {<commit_msg>remove duplicate timing settings on song control transition<commit_after>//
// Songs
// --------------------------------------------------


.song {
  position: relative;
}


// Song info

.song-title {
  margin-bottom: 0;
}

.song-meta {
  width: 64px;
  flex: 0 0 64px;
  margin-left: 30px;
}

.song-duration {
  line-height: 1.3 * $font-size-base*$line-height-base;
}


// Artist

.song-artists {
  list-style: none;
  padding: 0;
  color: $gray-light;
}

.song-artist {
  display: inline-block;

  + .song-artist:before {
    content: ', ';
  }
}


//
// Song Controls
// --------------------------------------------------

.song-controls {
  position: absolute;
  width: 100%;
  height: 250px;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  @include transition-property(opacity, background-color);
  @include transition-duration(0.3s);
  @include transition-timing-function(ease);
}

.song-toggle,
.song-delete {
  background-color: #101010;
  border-radius: 50%;
  cursor: pointer;
  margin: 0 7px;
  height: 0;
  width: 0;
  opacity: 0;
  @include transition-property(opacity, transform, width, height);
  @include transition-duration(0.3s);
  @include transition-timing-function(ease-out);
  
  &:after {
    content:'';
    display: inline-block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50% 50%;
  }
}

.song-controls:hover {
  background-color: rgba(255,255,255,0.2);
  .song-toggle,
  .song-delete {
    height: 25%;
    width: 25%;
    opacity: .8;
    
    &:hover {
      opacity: 1;
      transform: scale(1.1);
    }
  }
}

.song-toggle:after {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="37px" height="37px"><path fill="#FFFFFF" d="M9.5 36.2c-2.2 1.2-4 0.2-4-2.4V3c0-2.5 1.8-3.4 3.8-2.1l26.2 16.6c2.1 1.4 2 3.4-0.2 4.6L9.5 36.2z"/></svg>');
  
  .isPlaying & {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="37px" height="37px"><path fill="#FFFFFF" d="M13 32.4V4.6c0-1.6-1.3-2.9-2.9-2.9H7C5.5 1.7 4.1 3 4.1 4.6v27.9c0 1.6 1.3 2.9 2.9 2.9h3C11.6 35.4 13 34.1 13 32.4z"/><path fill="#FFFFFF" d="M32.9 32.4V4.6c0-1.6-1.3-2.9-2.9-2.9h-3C25.4 1.7 24 3 24 4.6v27.9c0 1.6 1.3 2.9 2.9 2.9h3C31.5 35.4 32.9 34.1 32.9 32.4z"/></svg>');
  }
}

.song-delete:after {
{'fraction_non_alphanumeric': 0.22953697608075488, 'fraction_numerical': 0.1130129471143296, 'mean_word_length': 2.3197378004369993, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 17, 'https://': 0, 'lorem ipsum': 0, 'www.': 4, 'xml': 8}, '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': '4524911', 'n_tokens_mistral': 2240, 'n_tokens_neox': 1936, 'n_words': 366}