@use "../../functions" as *;

@mixin add-bar(
  $weight: 1,
  $color: "ink",
  $side: "left",
  $radius: 0,
  $offset-x: 0,
  $offset-y: 0
) {
  $weight: if(sass($weight == null): 1; else: $weight);
  $color: if(sass($color == null): "ink"; else: $color);
  $side: if(sass($side == null): "left"; else: $side);
  $radius: if(sass($radius == null): 0; else: $radius);
  $offset-x: if(sass($offset-x == null): 0; else: $offset-x);
  $offset-y: if(sass($offset-y == null): 0; else: $offset-y);

  position: relative;

  &::after {
    background-color: color($color);
    border-radius: radius($radius);
    content: "";
    display: block;
    position: absolute;

    @if $side == ("left" or "right") {
      bottom: units($offset-y);
      top: units($offset-y);
      width: units($weight);
      #{$side}: units($offset-x);
    } @else {
      height: units($weight);
      left: units($offset-x);
      right: units($offset-x);
      #{$side}: units($offset-y);

      @media (forced-colors: active) {
        background-color: ButtonText;
      }
    }
  }
}

@mixin remove-bar {
  &::after {
    display: none;
  }
}