overleaf/services/web/frontend/stylesheets/bootstrap-5/abstracts/mixins.scss

// Button

@mixin ol-button-size(
  $font-size,
  $line-height,
  $padding-y,
  $padding-x: var(--spacing-06)
) {
  --bs-btn-font-size: #{$font-size};
  --bs-btn-line-height: #{$line-height};
  --bs-btn-padding-y: #{$padding-y};
  --bs-btn-padding-x: #{$padding-x};
}

@mixin ol-button-variant(
  $color,
  $background,
  $border: $background,
  $hover-background: $background,
  $hover-border: $hover-background,
  $borderless: true
) {
  --bs-btn-color: #{$color};
  --bs-btn-bg: #{$background};
  --bs-btn-border-color: #{$border};
  --bs-btn-hover-color: #{$color};
  --bs-btn-hover-bg: #{$hover-background};
  --bs-btn-hover-border-color: #{$hover-border};
  --bs-btn-active-color: #{$color};
  --bs-btn-active-bg: #{$hover-background};
  --bs-btn-active-border-color: #{$hover-border};
  --bs-btn-disabled-color: var(--content-disabled);
  --bs-btn-disabled-bg: var(--bg-light-disabled);
  --bs-btn-disabled-border-color: var(--bg-light-disabled);

  @if $borderless {
    --bs-btn-border-width: 0;
  }

  // Use the default state colors when in a loading state
  &[data-ol-loading='true'] {
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
  }
}

@mixin reset-button() {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  appearance: none;
}

@mixin modal-lg {
  max-width: 960px;
}

@mixin modal-md {
  max-width: 640px;
}

@mixin modal-sm {
  max-width: 480px;
}

// Toolbar
@mixin toolbar-sm-height {
  height: 32px;
}

@mixin toolbar-alt-bg() {
  background-color: var(--bg-dark-secondary);
}

// Filetree
@mixin file-tree-item-color {
  color: var(--content-primary-dark);
}

@mixin file-tree-item-hover-bg {
  background-color: var(--bg-dark-secondary);
}

@mixin file-tree-bg {
  background-color: var(--bg-dark-tertiary);
}