@use "00-base/variables" as *;

@use "00-base/colors" as *;

@mixin ma-chevron($side:"right") {

  @if ($side == "right") {

    &:after {
      border-right: 4px solid;
      border-bottom: 4px solid;
      content: "";
      display: inline-block;
      height: 10px;
      margin-top: 3px;
      margin-left: .3em;
      transform: translateY(-45%) rotate(-45deg);
      transform-origin: 75% 75%;
      transition: all .2s;
      vertical-align: middle;
      width: 10px;
    }
  }
  // left
  @else {

    &:before {
      border-right: 4px solid;
      border-bottom: 4px solid;
      content: "";
      display: inline-block;
      height: 10px;
      margin-top: 3px;
      margin-right: .5em;
      transform: translateY(-45%) rotate(135deg);
      transform-origin: 75% 75%;
      transition: all .2s;
      vertical-align: middle;
      width: 10px;
    }
  }
}