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

@import '~@lbry/components/sass/button/_index.scss';

.button {
  display: inline-block;

  svg {
    stroke-width: 1.9;
    position: relative;
    color: $lbry-gray-5;

    // Buttons that don't have a label
    &:only-child {
      color: inherit;
      width: 1.4rem;
      height: 1.4rem;
    }
  }
}

.button--primary {
  svg {
    color: white;
  }
}

// Play/View button that is overlayed ontop of the video player
.button--icon {
  height: 5rem;
  width: 5rem;
  border-radius: 2.5rem;
}

.button--primary,
.button--alt,
.button--inverse {
  height: var(--button-height);
  line-height: var(--button-height);
  border-radius: var(--button-radius);
  font-size: 1.1rem;
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
}

.button--alt {
  padding: 0;
}

.button--uri-indicator {
  max-width: 100%;
  height: 1.2em;
  vertical-align: text-top;
  text-align: left;
  text-overflow: ellipsis;
  transition: color 0.2s;

  &:hover {
    color: $lbry-teal-5;
  }
}

.button--close {
  position: absolute;
  top: var(--spacing-miniscule);
  right: var(--spacing-miniscule);
  padding: 0.3rem;
  transition: all var(--transition-duration) var(--transition-style);

  &:hover {
    background-color: $lbry-red-3;
    color: $lbry-white;
    border-radius: var(--card-radius);
  }
}

.button--subscribe {
  vertical-align: text-top;
  align-items: flex-start;
}

.button__label {
  // white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  // display: flex;
  // align-items: center;
}

// Handle icons on the left or right side of the button label
svg + .button__label,
.button__label + svg {
  margin-left: var(--spacing-miniscule);
}

.button__content {
  display: flex;
  align-items: center;
}