overleaf/services/web/frontend/stylesheets/ds/components/button.scss

@import '../mixins';

.btn.btn-ds {
  --bs-btn-font-family: var(--ds-font-family-sans);
  --bs-btn-border-radius: var(--ds-border-radius-200);

  &:focus-visible {
    @include ds-focus-outline;
  }

  // Default size
  @include ol-button-size(
    $font-size: var(--ds-font-size-400),
    $line-height: var(--ds-font-line-height-600),
    $padding-x: var(--ds-spacing-400),
    $padding-y: var(--ds-spacing-100)
  );

  &.btn-lg {
    @include ol-button-size(
      $font-size: var(--ds-font-size-400),
      $line-height: var(--ds-font-line-height-600),
      $padding-x: var(--ds-spacing-400),
      $padding-y: var(--ds-spacing-250)
    );
  }

  &.btn-sm {
    @include ol-button-size(
      $font-size: var(--ds-font-size-350),
      $line-height: var(--ds-font-line-height-500),
      $padding-x: var(--ds-spacing-200),
      $padding-y: var(--ds-spacing-100)
    );
  }

  // Variants
  &.btn-primary {
    @include ol-button-variant(
      $color: var(--ds-color-white),
      $background: var(--ds-color-neutral-950),
      $hover-background: var(--ds-color-neutral-900),
      $active-background: var(--ds-color-neutral-800),
      $disabled-color: var(--ds-color-neutral-700),
      $disabled-background: var(--ds-color-neutral-100)
    );
  }

  &.btn-secondary {
    @include ol-button-variant(
      $color: var(--ds-color-neutral-950),
      $background: var(--ds-color-neutral-200),
      $hover-background: var(--ds-color-neutral-300),
      $active-background: var(--ds-color-neutral-400),
      $disabled-color: var(--ds-color-neutral-700),
      $disabled-background: var(--ds-color-neutral-100)
    );
  }

  &.btn-tertiary {
    @include ol-button-variant(
      $color: var(--ds-color-neutral-950),
      $background: var(--ds-color-white),
      $hover-background: var(--ds-color-neutral-100),
      $active-background: var(--ds-color-neutral-200),
      $disabled-color: var(--ds-color-neutral-700),
      $disabled-background: var(--ds-color-neutral-100)
    );
  }

  &.btn-danger {
    @include ol-button-variant(
      $color: var(--ds-color-white),
      $background: var(--ds-color-red-700),
      $hover-background: var(--ds-color-red-800),
      $active-background: var(--ds-color-red-900),
      $disabled-color: var(--ds-color-neutral-700),
      $disabled-background: var(--ds-color-neutral-100)
    );
  }

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

      .loading-spinner-small {
        border-width: 0.25em;
        height: 1.25rem;
        width: 1.25rem;
      }

      .loading-spinner-large {
        border-width: 0.25em;
        height: 1.5rem;
        width: 1.5rem;
      }

      .spinner-border {
        border-right-color: color-mix(
          in srgb,
          var(--bs-btn-color) 32%,
          var(--bs-btn-bg)
        );
      }
    }

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

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

  .btn-social-icon {
    height: 24px;
    width: 24px;
    padding: var(--ds-spacing-50);
    margin: 0;
  }
}