@use "sass:color";
@use "sass:string";
@use "functions" as *;
@use "mixins" as *;

$scheme: '@primer/primitives/dist/styleLint/functional/themes/light.json' !default;

$enable-background-image-linear-gradient: string.index($scheme, '-high-contrast') == null !default;

$btn-color: json($scheme, button-default-fgColor-rest, '$value') !default;
$btn-background-color-start: json($scheme, button-default-bgColor-rest, '$value') !default;
$btn-background-color-stop: if($enable-background-image-linear-gradient, rounded-rgb(color.adjust($btn-background-color-start, $lightness: -3.3333333333%, $space: hsl)), $btn-background-color-start) !default;
$btn-border-color: json($scheme, button-default-borderColor-rest, '$value') !default;
$btn-hover-background-color-start: json($scheme, button-default-bgColor-hover, '$value') !default;
$btn-hover-background-color-stop: rounded-rgb(color.adjust($btn-hover-background-color-start, $lightness: -3.3333333333%, $space: hsl)) !default;
$btn-hover-border-color: json($scheme, button-default-borderColor-hover, '$value') !default;
$btn-focus-visible-outline-color: json($scheme, focus-outlineColor, '$value') !default;
$btn-active-background-color: json($scheme, button-default-bgColor-active, '$value') !default;
$btn-active-border-color: json($scheme, button-default-borderColor-active, '$value') !default;
$social-count-color:  json($scheme, button-default-fgColor-rest, '$value') !default;
$social-count-background-color: json($scheme, bgColor-default, '$value') !default;
$social-count-border-color: $btn-border-color !default;
$social-count-hover-color: json($scheme, button-outline-fgColor-rest, '$value') !default;
$octicon-heart-color: json($scheme, fgColor-sponsors, '$value') !default;

.btn,
.social-count {
  &:focus-visible {
    outline: 2px solid $btn-focus-visible-outline-color;
    outline-offset: -2px;
  }
}

.btn {
  @include blend(
    $color: $btn-color,
    $background-color: $btn-background-color-stop,
    $border-color: $btn-border-color,
  );
  @if ($enable-background-image-linear-gradient) {
    @include background-image-linear-gradient(
      $btn-background-color-start,
      $btn-background-color-stop,
    );
  }
  @else {
    @include background-image-none;
  }

  &:hover,
  &:focus {
    @include blend(
      $background-color: $btn-hover-background-color-stop,
      $background-position: 0 (-0.5em),
      $border-color: $btn-hover-border-color,
    );
    @if ($enable-background-image-linear-gradient) {
      @include background-image-linear-gradient(
        $btn-hover-background-color-start,
        $btn-hover-background-color-stop,
      );
    }
    @else {
      @include background-image-none;
    }
  }

  &:active {
    @include blend(
      $background-color: $btn-active-background-color,
      $border-color: $btn-active-border-color,
    );
    @if ($enable-background-image-linear-gradient) {
      @include background-image-none;
    }
  }
}

.social-count {
  @include blend(
    $color: $social-count-color,
    $background-color: $social-count-background-color,
    $border-color: $social-count-border-color,
  );

  &:hover,
  &:focus {
    color: $social-count-hover-color;
  }
}

.octicon-heart {
  color: $octicon-heart-color;
}
