/// Creates a chevron icon using CSS borders
/// @param {string} $orientation - The orientation of the chevron (down, up, left, right)
/// @param {string} $size - The size of the chevron (default: 1em)
/// @output A chevron icon at the specified orientation and size
@mixin ds_chevron($orientation: down, $size: 1em) {
    $chevron-width: #{$size * 0.25};

    content: '';
    background-color: transparent;
    border-style: solid;
    border-width: 0 0 $chevron-width $chevron-width;
    border-top-color: transparent;
    display: inline-block;
    height: $size;
    width: $size;

    // $spritename: 'expand_more';
    @if $orientation == down {
        transform: rotate(-45deg);
    } @else if $orientation == up {
        transform: rotate(-225deg);
    } @else if $orientation == left {
        transform: rotate(-315deg);
    } @else if $orientation == right {
        transform: rotate(-135deg);
    }
}

/// legacy non-prefixed names
/// @deprecated - use prefixed mixin instead
@mixin chevron($orientation: down, $size: 1em) {
    @include ds_chevron($orientation, $size);
}