@use '../../settings' as *;
@use '../../variables' as *;
@use '../functions' as *;
@use 'breakpoints' as *;
@mixin caret-down($width: $caret-width) {
  border-top: $width solid;
  border-inline-end: $width solid transparent;
  border-bottom: 0;
  border-inline-start: $width solid transparent;
}

@mixin caret-up($width: $caret-width) {
  border-top: 0;
  border-inline-end: $width solid transparent;
  border-bottom: $width solid;
  border-inline-start: $width solid transparent;
}

@mixin caret-end($width: $caret-width) {
  border-top: $width solid transparent;
  border-inline-end: 0;
  border-bottom: $width solid transparent;
  border-inline-start: $width solid;
}

@mixin caret-start($width: $caret-width) {
  border-top: $width solid transparent;
  border-inline-end: $width solid;
  border-bottom: $width solid transparent;
  border-inline-start: 0;
}

@mixin caret($direction: down, $width: $caret-width, $spacing: $caret-spacing, $vertical-align: $caret-vertical-align) {
  $selector: 'after';

  @if $direction == 'start' {
    $selector: 'before';
  }

  &:#{$selector} {
    content: '';
    display: inline-block;
    vertical-align: $caret-vertical-align;
    width: $caret-width;
    height: $caret-width;
    border-bottom: 1px var(--border-style);
    border-inline-start: 1px var(--border-style);
    margin-inline-end: 0.1em;

    @if $direction != 'start' {
      margin-inline-start: $caret-spacing;
    } @else {
      margin-inline-end: $caret-spacing;
    }

    @if $direction == down {
      transform: rotate(-45deg);
    } @else if $direction == up {
      transform: rotate(135deg);
    } @else if $direction == end {
      transform: rotate(-135deg);
    } @else {
      transform: rotate(45deg);
    }
  }

  @if $direction == 'start' {
    &::after {
      content: none;
    }
  }
}