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

@mixin make-caret($left: false, $position: calc(var(--spacer) * 0.5)) {
  position: relative;

  &::after {
    position: absolute;
    content: "";
    inset: 50% auto auto;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: calc(var(--spacer) * 0.25) solid transparent;
    border-right: calc(var(--spacer) * 0.25) solid transparent;
    pointer-events: none;

    @if $left {
      left: $position;
    } @else {
      right: $position;
    }
  }
}

@mixin make-caret-down($left: false, $color: "html-color", $position: calc(var(--spacer) * 0.5)) {
  @include make-caret($left);

  &::after {
    border-bottom: 0;
    border-top: calc(var(--spacer) * 0.25) solid hsl(from var(--#{$color}) h s l);
  }
}

@mixin make-caret-up($left: false, $color: "html-color", $position: calc(var(--spacer) * 0.5)) {
  @include make-caret($left);

  &::after {
    border-top: 0;
    border-bottom: calc(var(--spacer) * 0.25) solid hsl(from var(--#{$color}) h s l);
  }
}