/* ============================================================================
   @OBJECTS -> ARROW
   ========================================================================= */


/**
 * Creates arrow shapes using only CSS, includes the following directions:
 *
 * Down / Down right / Down left
 * Up / Up right / Up left
 * Left
 * Right
 *
 * The objects block class, its modifier class(s), and its element class(s)
 * (available as silent placeholder selectors also):
 *
   .o-arrow
   .o-arrow--tiny
   .o-arrow--small
   .o-arrow--large
   .o-arrow--huge
   .o-arrow--down
   .o-arrow--down-right
   .o-arrow--down-left
   .o-arrow--up
   .o-arrow--up-right
   .o-arrow--up-left
   .o-arrow--left
   .o-arrow--right
 *
 * @markup
   <span class="o-arrow [modifier(s)]"></span>
 *
 * @demo
 * http://codepen.io/chris-pearce/full/gbVLwy/
 */


/**
 * Settings.
 */

// Sizes
$o-arrow-size-base:     8 !default;

$o-arrow-size-tiny:     $o-arrow-size-base - 4 !default;

$o-arrow-size-small:    $o-arrow-size-base - 2 !default;

$o-arrow-size-large:    $o-arrow-size-base + 2 !default;

$o-arrow-size-huge:     $o-arrow-size-base + 4 !default;

// Colour
$o-arrow-color:         $color-text-base !default;


%o-arrow,
.o-arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border: strip-unit($o-arrow-size-base) * 1px solid transparent;
  vertical-align: middle;
}


/**
 * Modifier: sizes.
 */

// Tiny
%o-arrow--tiny,
.o-arrow--tiny {
  border-width: strip-unit($o-arrow-size-tiny) * 1px;
}

// Small
%o-arrow--small,
.o-arrow--small {
  border-width: strip-unit($o-arrow-size-small) * 1px;
}

// Large
%o-arrow--large,
.o-arrow--large {
  border-width: strip-unit($o-arrow-size-large) * 1px;
}

// Huge
%o-arrow--huge,
.o-arrow--huge {
  border-width: strip-unit($o-arrow-size-huge) * 1px;
}


/**
 * Modifier: directions.
 */

// Down
%o-arrow--down,
.o-arrow--down {
  border-top-color: $o-arrow-color;
}

// Down right
%o-arrow--down-right,
.o-arrow--down-right {
  border-bottom-color: $o-arrow-color;
  border-width: 0;
  border-bottom-width: strip-unit($o-arrow-size-base) * 1px;
  border-left-width: strip-unit($o-arrow-size-base) * 1px;
}

%o-arrow--down-right%o-arrow--tiny,
.o-arrow--down-right.o-arrow--tiny {
  border-bottom-width: strip-unit($o-arrow-size-tiny) * 1px;
  border-left-width: strip-unit($o-arrow-size-tiny) * 1px;
}

%o-arrow--down-right%o-arrow--small,
.o-arrow--down-right.o-arrow--small {
  border-bottom-width: strip-unit($o-arrow-size-small) * 1px;
  border-left-width: strip-unit($o-arrow-size-small) * 1px;
}

%o-arrow--down-right%o-arrow--large,
.o-arrow--down-right.o-arrow--large {
  border-bottom-width: strip-unit($o-arrow-size-large) * 1px;
  border-left-width: strip-unit($o-arrow-size-large) * 1px;
}

%o-arrow--down-right%o-arrow--huge,
.o-arrow--down-right.o-arrow--huge {
  border-bottom-width: strip-unit($o-arrow-size-huge) * 1px;
  border-left-width: strip-unit($o-arrow-size-huge) * 1px;
}

// Down left
%o-arrow--down-left,
.o-arrow--down-left {
  border-left-color: $o-arrow-color;
  border-width: 0;
  border-top-width: strip-unit($o-arrow-size-base) * 1px;
  border-left-width: strip-unit($o-arrow-size-base) * 1px;
}

%o-arrow--down-left%o-arrow--tiny,
.o-arrow--down-left.o-arrow--tiny {
  border-top-width: strip-unit($o-arrow-size-tiny) * 1px;
  border-left-width: strip-unit($o-arrow-size-tiny) * 1px;
}

%o-arrow--down-left%o-arrow--small,
.o-arrow--down-left.o-arrow--small {
  border-top-width: strip-unit($o-arrow-size-small) * 1px;
  border-left-width: strip-unit($o-arrow-size-small) * 1px;
}

%o-arrow--down-left%o-arrow--large,
.o-arrow--down-left.o-arrow--large {
  border-top-width: strip-unit($o-arrow-size-large) * 1px;
  border-left-width: strip-unit($o-arrow-size-large) * 1px;
}

%o-arrow--down-left%o-arrow--huge,
.o-arrow--down-left.o-arrow--huge {
  border-top-width: strip-unit($o-arrow-size-huge) * 1px;
  border-left-width: strip-unit($o-arrow-size-huge) * 1px;
}

// Up
%o-arrow--up,
.o-arrow--up {
  border-bottom-color: $o-arrow-color;
}

// Up right
%o-arrow--up-right,
.o-arrow--up-right {
  border-right-color: $o-arrow-color;
  border-width: 0;
  border-right-width: strip-unit($o-arrow-size-base) * 1px;
  border-bottom-width: strip-unit($o-arrow-size-base) * 1px;
}

%o-arrow--up-right%o-arrow--tiny,
.o-arrow--up-right.o-arrow--tiny {
  border-right-width: strip-unit($o-arrow-size-tiny) * 1px;
  border-bottom-width: strip-unit($o-arrow-size-tiny) * 1px;
}

%o-arrow--up-right%o-arrow--small,
.o-arrow--up-right.o-arrow--small {
  border-right-width: strip-unit($o-arrow-size-small) * 1px;
  border-bottom-width: strip-unit($o-arrow-size-small) * 1px;
}

%o-arrow--up-right%o-arrow--large,
.o-arrow--up-right.o-arrow--large {
  border-right-width: strip-unit($o-arrow-size-large) * 1px;
  border-bottom-width: strip-unit($o-arrow-size-large) * 1px;
}

%o-arrow--up-right%o-arrow--huge,
.o-arrow--up-right.o-arrow--huge {
  border-right-width: strip-unit($o-arrow-size-huge) * 1px;
  border-bottom-width: strip-unit($o-arrow-size-huge) * 1px;
}

// Up left
%o-arrow--up-left,
.o-arrow--up-left {
  border-top-color: $o-arrow-color;
  border-width: 0;
  border-top-width: strip-unit($o-arrow-size-base) * 1px;
  border-right-width: strip-unit($o-arrow-size-base) * 1px;
}

%o-arrow--up-left%o-arrow--tiny,
.o-arrow--up-left.o-arrow--tiny {
  border-top-width: strip-unit($o-arrow-size-tiny) * 1px;
  border-right-width: strip-unit($o-arrow-size-tiny) * 1px;
}

%o-arrow--up-left%o-arrow--small,
.o-arrow--up-left.o-arrow--small {
  border-top-width: strip-unit($o-arrow-size-small) * 1px;
  border-right-width: strip-unit($o-arrow-size-small) * 1px;
}

%o-arrow--up-left%o-arrow--large,
.o-arrow--up-left.o-arrow--large {
  border-top-width: strip-unit($o-arrow-size-large) * 1px;
  border-right-width: strip-unit($o-arrow-size-large) * 1px;
}

%o-arrow--up-left%o-arrow--huge,
.o-arrow--up-left.o-arrow--huge {
  border-top-width: strip-unit($o-arrow-size-huge) * 1px;
  border-right-width: strip-unit($o-arrow-size-huge) * 1px;
}

// Left
%o-arrow--left,
.o-arrow--left {
  border-right-color: $o-arrow-color;
}

// Right
%o-arrow--right,
.o-arrow--right {
  border-left-color: $o-arrow-color;
}