overleaf/services/web/frontend/stylesheets/bootstrap-5/components/button.scss

.btn {
  // Focus style for all buttons
  --bs-btn-focus-box-shadow: 0 0 0 2px var(--border-active-dark);

  &:focus-visible {
    background-color: var(--bs-btn-bg);
  }

  // Sizes

  // Default size
  @include ol-button-size(
    $font-size: var(--font-size-03),
    $line-height: var(--line-height-03),
    $padding-y: var(--spacing-03)
  );

  &.btn-lg {
    @include ol-button-size(
      $font-size: var(--font-size-03),
      $line-height: var(--line-height-03),
      $padding-y: var(--spacing-05)
    );
  }

  &.btn-sm {
    @include ol-button-size(
      $font-size: var(--font-size-02),
      $line-height: var(--line-height-02),
      $padding-y: var(--spacing-01),
      $padding-x: var(--spacing-05)
    );
  }

  // Variants
  &.btn-primary {
    @include ol-button-variant(
      $color: var(--content-primary-dark),
      $background: var(--bg-accent-01),
      $hover-background: var(--bg-accent-02),
      $hover-border: var(--bg-accent-02)
    );
  }

  &.btn-secondary {
    @include ol-button-variant(
      $color: var(--content-primary),
      $background: var(--bg-light-primary),
      $border: var(--border-primary),
      $hover-background: var(--bg-light-tertiary),
      $hover-border: var(--border-primary),
      $borderless: false
    );
  }

  &.btn-ghost {
    @include ol-button-variant(
      $color: var(--content-primary),
      $background: var(--bg-light-primary),
      $hover-background: var(--bg-light-tertiary)
    );
  }

  &.btn-danger {
    @include ol-button-variant(
      $color: var(--content-primary-dark),
      $background: var(--bg-danger-01),
      $border: var(--bg-danger-01),
      $hover-background: var(--bg-danger-02)
    );
  }

  &.btn-danger-ghost {
    @include ol-button-variant(
      $color: var(--content-danger),
      $background: var(--bg-light-primary),
      $hover-background: var(--bg-danger-03)
    );
  }

  &.btn-premium {
    @include ol-button-variant(
      $color: var(--content-primary-dark),
      $background: var(--blue-70)
    );

    background: var(--premium-gradient);
  }
}

// Link buttons
// -------------------------

// Make a button look and behave like a link
.btn-link {
  color: var(--link-ui);
  font-weight: normal;
  cursor: pointer;
  border-radius: 0;
  text-decoration: underline;
  padding: 0;
  font-size: inherit;
  vertical-align: inherit;

  &,
  &:active,
  &[disabled],
  fieldset[disabled] & {
    background-color: transparent;
    @include box-shadow(none);
  }
  &:hover,
  &:focus {
    color: var(--link-ui-hover);
    text-decoration: none;
    background-color: transparent;
  }

  &.btn-danger {
    color: var(--content-danger);
    //since it's a link, override the button states
    &:active {
      color: var(--content-danger);
      background-color: transparent;
    }
    &:focus-visible {
      background-color: transparent;
      outline: -webkit-focus-ring-color auto 1px;
    }
  }
}

.button-loading {
  align-items: center;
  display: inline-grid;
  grid-template-areas: 'container'; // Define a single grid area
  pointer-events: none;
}

.button-loading > * {
  grid-area: container; // Position all the direct children within the single grid area
}

.button-loading .spinner-container {
  display: flex;
  justify-content: center;
  align-items: center;

  .loading-spinner-small {
    border-width: 0.2em;
    height: 20px;
    width: 20px;
  }

  .loading-spinner-large {
    border-width: 0.2em;
    height: 24px;
    width: 24px;
  }
}

// Hide the text when the spinner is visible
.button-loading > [aria-hidden='true'] {
  visibility: hidden;
}

.button-content {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-04); // Add gap between text and icons
  justify-content: center;

  .icon-small {
    font-size: 20px;
  }

  .icon-large {
    font-size: 24px;
  }
}

.icon-button-small {
  padding: var(--spacing-01);
}

.icon-button-default {
  padding: var(--spacing-04);
}

.icon-button-large {
  padding: var(--spacing-05);
}

// Set the visited colour for a link that is styled as a button. This is necessary because we have a generic rule that
// sets the colour of visited links
a[role='button']:visited {
  color: var(--bs-btn-color);
}