@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);
  }
}

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

  // 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);
  }
}