// Generate SVG image for pixelated corners
@function pixel-borders-image($corner-size, $color) {
  $svg: '';
  $svg-path: '';
  $svg-size: $corner-size * 6;
  $color: str-replace('' + $color, '#', '%23');

  @if $corner-size == 1 {
    $svg-path: 'M0 2h2v2H0zM2 0h2v2H2zM4 2h2v2H4zM2 4h2v2H2z';
  } @else {
    $svg-path: 'M2 2h2v2H2zM4 0h2v2H4zM10 4h2v2h-2zM0 4h2v2H0zM6 0h2v2H6zM8 2h2v2H8zM8 8h2v2H8zM6 10h2v2H6zM0 6h2v2H0zM10 6h2v2h-2zM4 10h2v2H4zM2 8h2v2H2z';
  }

  $svg: "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='#{$svg-size}' height='#{$svg-size}'><path d='#{$svg-path}' fill='#{$color}' /></svg>";
  
  @return $svg;
}

// String replace function - replace `$search` with `$replace` in `$string`
@function str-replace($string, $search, $replace: '') {
  $index: str-index('' + $string, $search);

  @if $index {
    @return str-slice('' + $string, 1, $index - 1) + $replace +
      str-replace(
        str-slice('' + $string, $index + str-length($search)),
        $search,
        $replace
      );
  } 
  @return '' + $string;
}

@function get-color-name($color) {
  @return str-replace($color, '#', '');
}

// define SVG border image variants (only the ones used) as
// CSS custom properties, so they don't get duplicated in resulting generated code 
:root {
  --pixel-borders-image-1-primary-color-normal: #{url(pixel-borders-image(1, $primary-color-normal))};
  --pixel-borders-image-1-success-color-normal: #{url(pixel-borders-image(1, $success-color-normal))};
  --pixel-borders-image-1-warning-color-normal: #{url(pixel-borders-image(1, $warning-color-normal))};
  --pixel-borders-image-1-error-color-normal: #{url(pixel-borders-image(1, $error-color-normal))};
  --pixel-borders-image-1-color-black-absolute: #{url(pixel-borders-image(1, $color-black-absolute))};
  --pixel-borders-image-2-color-black-absolute: #{url(pixel-borders-image(2, $color-black-absolute))};
  --pixel-borders-image-1-color-white-absolute: #{url(pixel-borders-image(1, $color-white-absolute))};
  --pixel-borders-image-2-color-white-absolute: #{url(pixel-borders-image(2, $color-white-absolute))};
  --pixel-borders-image-1-contrast-alpha-color-shadow: #{url(pixel-borders-image(1, $contrast-alpha-color-shadow))}; 
  --pixel-borders-image-1-contrast-alpha-color-normal: #{url(pixel-borders-image(1, $contrast-alpha-color-normal))};
} 

// Pixel border
@mixin pixel-borders(
  $corner-size: 1,
  $border-size: $border-size,
  $border-color: 'color-black',
  $border-inset-color: false
) {
  @supports (border-image-source: none) {
    border-radius: ($border-size * ($corner-size + 2)) + ($corner-size * 2);
  }
  
  border-style: solid;
  border-width: $border-size;
  border-color: var(--#{$border-color});
 
  border-image-slice: $corner-size * 2;
  border-image-width: $corner-size;
  border-image-outset: 0;
 
  border-image-source: var(--pixel-borders-image-#{$corner-size}-#{$border-color});

  @if $border-inset-color { 
    @include pixel-inset-border($border-size, $border-inset-color);
  }
}

// Pixel inset border
@mixin pixel-inset-border(
  $border-inset-size: 4px,
  $border-inset-color: #ddd,
  $border-inset-sides: 'bottom-right',
  $border-inset-color-br: false,
  $border-inset-color-tl: false
) {
  $box-shadow: '';
  @if not($border-inset-color-br) {
    $border-inset-color-br: $border-inset-color;
  }

  @if not($border-inset-color-tl) {
    $border-inset-color-tl: $border-inset-color;
  }

  position: relative;
 
  &::after {
    content: '';
    position: absolute;
    z-index: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;

    @if $border-inset-sides == 'bottom-right' or $border-inset-sides == false {
      $box-shadow: inset -#{$border-inset-size} -#{$border-inset-size}
        $border-inset-color-br;
    }

    @if $border-inset-sides == 'top-left' {
      $box-shadow: inset
        $border-inset-size
        $border-inset-size
        $border-inset-color-tl;
    }

    @if $border-inset-sides == 'all' {
      $box-shadow: inset -#{$border-inset-size} -#{$border-inset-size}
          $border-inset-color-br,
        inset $border-inset-size $border-inset-size $border-inset-color-tl;
    }

    box-shadow: $box-shadow;
  }
}

// Pixel box - Colours for border and inset are calculated using $background-color unless $border-color is passed
@mixin pixel-box(
  $corner-size,
  $border-size,
  $background-color,
  $border-color: false,
  $border-inset: true,
  $border-inset-size: false,
  $border-inset-color: false,
  $border-inset-sides: false,
  $border-inset-color-br: false,
  $border-inset-color-tl: false
) {
  $background-color-hover: darken($background-color, 5);

  @if not($border-color) {
    $border-color: darken($background-color, 20);
  }

  @include pixel-borders(
    $corner-size: $corner-size,
    $border-size: $border-size,
    $border-color: $border-color
  );

  @if $border-inset-sides == 'all' and not($border-inset-color) {
    $border-inset-color-br: darken($background-color, 10);
    $border-inset-color-tl: lighten($background-color, 15);
  }

  @if not($border-inset-color) {
    $border-inset-color: darken($background-color, 10);
  }

  @if $border-inset-sides == 'top-left' {
    $border-inset-color: lighten($background-color, 15);
  }

  @if $border-inset {
    @include pixel-inset-border(
      $border-inset-size: var(--border-size),
      $border-inset-color: $border-inset-color,
      $border-inset-sides: $border-inset-sides,
      $border-inset-color-br: $border-inset-color-br,
      $border-inset-color-tl: $border-inset-color-tl
    );
  }

  background-color: $background-color;

  &:hover,
  &:focus {
    background-color: $background-color-hover;
  }
}