// 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;
  -webkit-appearance: none;
}