@mixin resetList {
  list-style: none;
  padding: 0;
  margin: 0;
}

@mixin resetButton {
  background-color: transparent;
  padding: 0;
  font: inherit;
  color: inherit;
  border: none;
  cursor: pointer;
}

@mixin optional-at-root($sel) {
  @at-root #{if(not &, $sel, selector-append(&, $sel))} {
    @content;
  }
}

@mixin placeholder {
  @include optional-at-root('::-webkit-input-placeholder') {
    @content;
  }

  @include optional-at-root(':-moz-placeholder') {
    @content;
  }

  @include optional-at-root('::-moz-placeholder') {
    @content;
  }

  @include optional-at-root(':-ms-input-placeholder') {
    @content;
  }
}

@mixin triangle($direction, $size, $color) {
  content: '';

  width: 0;
  height: 0;

  $directions: ('down', 'left', 'up', 'right');
  $positions: ('top', 'right', 'bottom', 'left');

  @each $position in $positions {
    $index: index($positions, $position);

    @if nth($directions, $index) == $direction {
      border-#{$position}: $size solid $color;
    } @else {
      border-#{$position}: $size solid transparent;
    }
  }
}

/**
 * @direction: 'top', 'right', 'bottom', 'left'
 * @size: 10px
 * @color: #fff, $black
 * @borderSize: 1px
 */
@mixin arrow($direction, $size, $color, $borderSize: 1px) {
  $angle: null;

  @if $direction == 'bottom' {
    $angle: -45deg;
  } @else if $direction == 'right' {
    $angle: -135deg;
  } @else if $direction == 'left' {
    $angle: 45deg;
  } @else if $direction == 'top' {
    $angle: 135deg;
  }

  @include transform(translate(-50%, -50%) rotate($angle));

  border-left: $borderSize solid $color;
  border-bottom: $borderSize solid $color;
  content: '';
  height: $size;
  left: 50%;
  position: absolute;
  top: 50%;
  width: $size;
}