<commit_before>.btn {
  fill: currentColor;
  position: relative;

  svg {
    stroke-width: 1.9;
    width: 1.2rem;
    height: 1.2rem;
    position: relative;
    top: 2px;
    stroke-opacity: 0.7;

    // Buttons that don't have a label
    &:only-child {
      stroke-opacity: 1;
      width: 1.4rem;
      height: 1.4rem;
      top: 0;
    }
  }

  .btn__label {
    margin: 0;
  }

  svg + .btn__label {
    margin-left: var(--spacing-vertical-small);
  }
}

.btn--alt {
  &:hover {
    text-decoration: underline;
  }
}

.btn--constrict {
  @include constrict;
}

.btn--disabled {
  opacity: 0.3;
}

.btn--external-link,
.btn--link {
  transition: color 0.2s;

  &:not(.btn--disabled):not(:hover) {
    color: $lbry-teal-5;

    html[data-theme='dark'] & {
      color: $lbry-teal-3;
    }
  }

  &:not(.btn--disabled):hover {
    color: $lbry-teal-3;

    html[data-theme='dark'] & {
      color: $lbry-teal-4;
    }
  }
}

.btn--external-link {
  font-weight: 500;
  text-align: left;
}

// Large icons used for play/view on the file page
.btn--icon {
  width: 5rem;
  height: 5rem;

  background-repeat: no-repeat;
  background-size: 50%;
  border-radius: 50%;
  color: $lbry-white;
  transition: background-color 0.2s;

  &:not(:hover) {
    background-color: rgba($lbry-black, 0.7);
  }

  // The play icon looks a little weird without this
  .btn--play {
    padding-left: 0.25rem;
  }

  .btn__label {
    display: none;
  }

  svg {
    width: 3rem;
    height: 3rem;

    margin-right: 0;
    position: relative;
    top: 0.1rem;
  }
}

.btn--inverse {
  border: 1px solid $lbry-gray-1;
  border-radius: 1rem;
  color: inherit;
  font-size: 1rem;
  padding: var(--spacing-vertical-miniscule) var(--spacing-vertical-medium);
  transition: background-color 0.2s;

  html[data-theme='dark'] & {
    border-color: rgba($lbry-white, 0.1);
  }

  &:not(:hover) {
    background-color: transparent;
  }

  &:hover {
    background-color: $lbry-gray-1;
    color: $lbry-black;

    html[data-theme='dark'] & {
      background-color: rgba($lbry-white, 0.1);
    }
  }

  .btn__content {
    svg {
      color: $lbry-gray-4;
    }<commit_msg>Dark mode inverse button css<commit_after>.btn {
  fill: currentColor;
  position: relative;

  svg {
    stroke-width: 1.9;
    width: 1.2rem;
    height: 1.2rem;
    position: relative;
    top: 2px;
    stroke-opacity: 0.7;

    // Buttons that don't have a label
    &:only-child {
      stroke-opacity: 1;
      width: 1.4rem;
      height: 1.4rem;
      top: 0;
    }
  }

  .btn__label {
    margin: 0;
  }

  svg + .btn__label {
    margin-left: var(--spacing-vertical-small);
  }
}

.btn--alt {
  &:hover {
    text-decoration: underline;
  }
}

.btn--constrict {
  @include constrict;
}

.btn--disabled {
  opacity: 0.3;
}

.btn--external-link,
.btn--link {
  transition: color 0.2s;

  &:not(.btn--disabled):not(:hover) {
    color: $lbry-teal-5;

    html[data-theme='dark'] & {
      color: $lbry-teal-3;
    }
  }

  &:not(.btn--disabled):hover {
    color: $lbry-teal-3;

    html[data-theme='dark'] & {
      color: $lbry-teal-4;
    }
  }
}

.btn--external-link {
  font-weight: 500;
  text-align: left;
}

// Large icons used for play/view on the file page
.btn--icon {
  width: 5rem;
  height: 5rem;

  background-repeat: no-repeat;
  background-size: 50%;
  border-radius: 50%;
  color: $lbry-white;
  transition: background-color 0.2s;

  &:not(:hover) {
    background-color: rgba($lbry-black, 0.7);
  }

  // The play icon looks a little weird without this
  .btn--play {
    padding-left: 0.25rem;
  }

  .btn__label {
    display: none;
  }

  svg {
    width: 3rem;
    height: 3rem;

    margin-right: 0;
    position: relative;
    top: 0.1rem;
  }
}

.btn--inverse {
  border: 1px solid $lbry-gray-1;
  border-radius: 1rem;
  color: inherit;
  font-size: 1rem;
  padding: var(--spacing-vertical-miniscule) var(--spacing-vertical-medium);
  transition: background-color 0.2s;

  html[data-theme='dark'] & {
    border-color: rgba($lbry-white, 0.1);
  }

  &:not(:hover) {
    background-color: transparent;
  }

  &:hover {
    background-color: $lbry-gray-1;
    color: $lbry-black;

    html[data-theme='dark'] & {
      background-color: rgba($lbry-white, 0.1);
      color: $lbry-white;
    }
  }

  .btn__content {
    svg {
      color: $lbry-gray-4;
    }
{'fraction_non_alphanumeric': 0.1677805946070523, 'fraction_numerical': 0.026273334869785666, 'mean_word_length': 2.307926829268293, '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': '5616187', 'n_tokens_mistral': 1843, 'n_tokens_neox': 1695, 'n_words': 334}