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

.button {
  border-radius: 0;

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

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

  &.button--icon {
    border-radius: 50%;
  }
}

.button--primary,
.button--alt,
.button--no-style {
  svg {
    width: 1.2rem;
    height: 1.2rem;
  }
}

.button--inverse {
  font-size: 1rem;
  transition: background-color 0.2s;

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

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

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

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

  .button__content {
    svg {
      color: $lbry-gray-4;
    }
  }
}
.button--link:not(:hover):not(:disabled) {
  html[data-mode='dark'] & {
    color: $lbry-teal-4;
  }
}

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

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

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

  &:disabled {
    opacity: 1;
  }

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

.button--uri-indicator {
  width: 100%;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.2s;

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