@use "sass:color" as sasscolor;
@use "./color";

$font-family: "OrangeSK Neue", "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-size: 16px;
$line-height: 1.25;

$background: var(--color-background-primary);
$text-color: var(--color-text-default);

$focusring-color: var(--color-border-contrast);
$focusring-width: 2px;
$focusring-offset: 2px;
$focus-outline: $focusring-width solid $focusring-color;
$focus-shadow:
  0 0 0 2px var(--color-background-primary),
  0 0 0 4px $focusring-color;

$selection-background: sasscolor.adjust(color.$orange-dark, $alpha: -0.1);

@mixin focusring {
  &:focus-visible {
    outline: $focus-outline;
    outline-offset: $focusring-offset;
  }

  &:focus:not(:focus-visible) {
    outline-width: 0;
    outline-color: transparent;
  }
}

@mixin focusring-flush {
  &:focus-visible {
    outline: $focus-outline;
    outline-offset: 0 !important;
  }

  &:focus:not(:focus-visible) {
    outline-width: 0;
    outline-color: transparent;
  }
}

@mixin focusring-round {
  border-radius: 100%;

  &:focus-visible {
    outline-width: 0 !important;
    outline-color: transparent !important;
    box-shadow: $focus-shadow;
  }

  &:focus:not(:focus-visible) {
    outline-width: 0 !important;
    outline-color: transparent !important;
    box-shadow: none;
  }
}