@use "../../settings";

/*
Direction

The direction module.

Weight: -97

Style guide: #{settings.$prefix}-icon.direction
*/

/*
Modifiers

The direction modifiers.

Weight: -100

Markup: <span class="#{settings.$prefix}-icon  #{settings.$prefix}-icon--type-arrow-normal  {{modifier_class}}"></span>

#{settings.$prefix}-icon--direction-top - Top
#{settings.$prefix}-icon--direction-right - Right
#{settings.$prefix}-icon--direction-bottom - Bottom
#{settings.$prefix}-icon--direction-left - Left

Style guide: #{settings.$prefix}-icon.direction.builtin
*/
.#{settings.$prefix}-icon--direction {
  &-top {
    --transform: rotate(0);
  }

  &-right {
    --transform: rotate(90deg);
  }

  &-bottom {
    --transform: rotate(180deg);
  }

  &-left {
    --transform: rotate(-90deg);
  }
}