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

.button {
  display: inline-block;

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

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

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

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

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

// We need the :disabled to override the default disabled button styles
// This is a little different because we still want to keep the button styled
// since it acts as an "active" state
.button--subscription-view-selected:disabled {
  color: $lbry-teal-5;
  border-bottom: 1px solid $lbry-teal-5;
  opacity: 1;

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

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

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