lbry-desktop/src/renderer/scss/component/_button.scss

.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;
    }
  }
}

.btn--load-screen {
  border-bottom: 1px solid $lbry-white;
  display: inline-block;

  &:hover {
    border-bottom: 1px solid $lbry-blue-1;
    color: $lbry-blue-1;
  }
}

.btn--primary {
  align-self: center; // fixes buttons next to tall elements inside one with `display: flex`
  border-radius: 1rem;
  color: $lbry-white;
  padding: var(--spacing-vertical-miniscule) var(--spacing-vertical-medium);
  transition: background-color 0.2s;

  &:not(:hover) {
    background-color: $lbry-teal-5;
  }

  &:hover {
    background-color: $lbry-teal-3;

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

.btn--uppercase {
  text-transform: uppercase;
}

.btn--selected {
  font-weight: 800;
  color: $lbry-teal-5;

  &:disabled {
    opacity: 1;
  }

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