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

.button--primary,
.button--secondary,
.button--alt {
  @media (max-width: $breakpoint-small) {
    font-size: var(--font-small);
  }
}

.button--primary,
.button--secondary,
.button--alt,
.button--link {
  &:focus {
    @include focus;
    z-index: 2; // Ensure focus box-shadow is always visible on every button side
  }
}

.button--uri-indicator {
  @extend .button--link;
  color: var(--color-text-subtitle);
  max-width: 100%;
  text-align: left;
  text-overflow: ellipsis;
  transition: color 0.2s;

  .markdown-preview & {
    height: initial;
    vertical-align: initial;
  }
}

.button--close {
  z-index: 1;
  position: absolute;
  top: var(--spacing-xxs);
  right: var(--spacing-xxs);
  padding: 0.3rem;
  transition: all var(--transition-duration) var(--transition-style);
  border-radius: var(--card-radius);
  color: var(--color-text);
  font-size: var(--font-body);

  svg {
    height: 1rem;
    width: 1rem;
  }

  &:hover {
    color: var(--color-button-primary-text);
    background-color: var(--color-button-primary-bg);
  }

  &:focus {
    @include focus;
  }

  @media (max-width: $breakpoint-small) {
    padding: var(--spacing-m) var(--spacing-s);
  }
}

.button--header-close {
  background-color: var(--color-primary-alt);
  padding: var(--spacing-s);
}

.button--download-link {
  .button__label {
    white-space: normal;
    text-align: left;
  }
}

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

.button__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.button-toggle {
  padding: 0 var(--spacing-m);
  height: var(--height-button);
  font-size: var(--font-base);
  border: 1px solid var(--color-border);
  border-left-width: 0;
  border-radius: 0;
  margin: 0;
  background-color: var(--color-card-background);
  @media (max-width: $breakpoint-small) {
    padding: var(--spacing-m) var(--spacing-s);
  }
  svg {
    opacity: 0.5;
  }

  &:first-of-type {
    border-left-width: 1px;
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
  }

  &:last-of-type {
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    margin-right: var(--spacing-s);
  }
}

.button-toggle--expandformobile {
  @media (max-width: $breakpoint-small) {
    display: block;
    width: 100%;
    text-align: center;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);

    &:not(:first-of-type) {
      margin-top: var(--spacing-s);
    }
  }
}

.button-toggle--active {
  color: var(--color-primary);
  background-color: var(--color-primary-alt);

  svg {
    opacity: 1;
  }

  &:hover {
    cursor: default;
    text-decoration: none;
    background-color: var(--color-primary-alt);
  }
}

.button-toggle--custom {
  color: var(--color-primary);
  svg {
    opacity: 1;
  }
}

.button-toggle__label {
  @extend label;
  display: inline-block;
  margin-top: -4px;
}

.button-group {
  display: flex;

  .button:first-child:not(:only-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 1px solid var(--color-button-border);
  }

  .button:nth-child(2) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}

.button-toggle-group-action {
  position: absolute; // Centers the button along toggle buttons

  @media (max-width: $breakpoint-small) {
    position: relative;
    top: var(--spacing-s);
  }
}