// ==========
// CARETS
// ==========
$STYLEGUIDE_CARETS_ID: caret !default;
$STYLEGUIDE_CARETS: () !default;

@if not styleguide-component-exists($STYLEGUIDE_CARETS_ID, $CONFIG_THEME) {
$a-blackhole: styleguide-add-component($STYLEGUIDE_CARETS_ID,  $STYLEGUIDE_CARETS, (
  (default, (
    inline-block        true,
    vertical-align      middle,
    // triangle... @see triangle() mixin
    height              0,
    width               0,
    font-size           0,
    line-height         0,
    border-style        dashed,
    border-color        transparent,
    border-top-style    solid,
    border-width        _styleguideCaretSize(medium),
    border-top-color    nth($CONFIG_COLOR_COPY, 1),
    overflow            hidden,
    content             $CONTENT_PLACEHOLDER
  )),
  (in-dark, (
    border-top-color    nth-cyclic($CONFIG_COLOR_COPY, 2),
    nil
  )),
  (in-punchcut, (
    inherit (in-dark),
    nil
  )),
  (in-bristol, (
    inherit (in-dark),
    nil
  )),
  (in-tooltip, (
    inherit (in-dark),
    nil
  )),
  (in-button, (
    border-top-color    $CONFIG_COLOR_BUTTON_PRIMARY,
    nil
  )),
  (in-button in-secondary, (
    border-top-color    $CONFIG_COLOR_BUTTON_SECONDARY,
    nil
  )),
  (in-button in-spotlight, (
    border-top-color    $CONFIG_COLOR_BUTTON_SPOTLIGHT,
    nil
  )),
  // SIZES
  (large, (
    border-width        _styleguideCaretSize(large),
    nil
  )),
  (small, (
    border-width        _styleguideCaretSize(small),
    nil
  )),
  (in-button in-large, (
    inherit (large),
    nil
  )),
  (in-button in-small, (
    inherit (small),
    nil
  )),
  // upward caret
  (north, (
    border-top-color    nil,
    border-top-style    nil,
    border-bottom-style solid,
    border-bottom-color nth($CONFIG_COLOR_COPY, 1),
    border-width        _styleguideCaretSize(medium, north)
  )),
  (north in-button, (
    border-bottom-color $CONFIG_COLOR_BUTTON_PRIMARY,
    nil
  )),
  (north in-button in-secondary, (
    border-bottom-color $CONFIG_COLOR_BUTTON_SECONDARY,
    nil
  )),
  (north in-button in-spotlight, (
    border-bottom-color $CONFIG_COLOR_BUTTON_SPOTLIGHT,
    nil
  )),
  // rightward caret
  (east, (
    border-top-color    nil,
    border-top-style    nil,
    border-left-style   solid,
    border-left-color   nth($CONFIG_COLOR_COPY, 1),
    border-width        _styleguideCaretSize(medium, east)
  )),
  (east in-button, (
    border-left-color   $CONFIG_COLOR_BUTTON_PRIMARY,
    nil
  )),
  (east in-button in-secondary, (
    border-left-color   $CONFIG_COLOR_BUTTON_SECONDARY,
    nil
  )),
  (east in-button in-spotlight, (
    border-left-color   $CONFIG_COLOR_BUTTON_SPOTLIGHT,
    nil
  )),
  // leftward caret
  (west, (
    border-top-color    nil,
    border-top-style    nil,
    border-right-style  solid,
    border-right-color  nth($CONFIG_COLOR_COPY, 1),
    border-width        _styleguideCaretSize(medium, east)
  )),
  (west in-button, (
    border-left-color   $CONFIG_COLOR_BUTTON_PRIMARY,
    nil
  )),
  (west in-button in-secondary, (
    border-left-color   $CONFIG_COLOR_BUTTON_SECONDARY,
    nil
  )),
  (west in-button in-spotlight, (
    border-left-color   $CONFIG_COLOR_BUTTON_SPOTLIGHT,
    nil
  )),
  // SIZES
  (north in-button in-large, (
    border-width        _styleguideCaretSize(large, north),
    nil
  )),
  (north in-button in-small, (
    border-width        _styleguideCaretSize(small, north),
    nil
  )),
  (west in-button in-large, (
    border-width        _styleguideCaretSize(large, west),
    nil
  )),
  (west in-button in-small, (
    border-width        _styleguideCaretSize(small, west),
    nil
  )),
  (east in-button in-large, (
    border-width        _styleguideCaretSize(large, east),
    nil
  )),
  (east in-button in-small, (
    border-width        _styleguideCaretSize(small, east),
    nil
  )),
  // on hovercards
  (on-hovercard, (
    // remove unneeded styles
    inline-block        nil,
    vertical-align      nil,
    height              nil,
    width               nil,
    font-size           nil,
    line-height         nil,
    border-style        nil,
    border-color        nil,
    border-top-style    nil,
    border-right-style  nil,
    border-bottom-style nil,
    border-left-style   nil,
    border-width        nil,
    border-top-color    nil,
    border-right-color  nil,
    border-bottom-color nil,
    border-left-color   nil,
    overflow            nil,
    // real styles
    position            absolute,
    display             block,
    width               nth($CONFIG_DIM_HOVERCARD_TIP, 1),
    height              nth-cyclic($CONFIG_DIM_HOVERCARD_TIP, 2),
    margin-left         -1/2*nth($CONFIG_DIM_HOVERCARD_TIP, 1),
    background          (transparent image-url($CONFIG_IMG_HOVERCARD_TIP) _styleguideGetTooltipTipBG(south) no-repeat),
    top                 100%,
    left                50%
  )),
  (south-west on-hovercard, (
    left                $CONFIG_DIM_HOVERCARD_TIP_OFFSET,
    margin-left         nil
  )),
  (south-east on-hovercard, (
    left                nil,
    right               $CONFIG_DIM_HOVERCARD_TIP_OFFSET,
    margin-left         nil
  )),
  (north on-hovercard, (
    background-position _styleguideGetTooltipTipBG(north),
    top                 nil,
    bottom              100%
  )),
  (north-west on-hovercard, (
    inherit (north on-hovercard),
    left                $CONFIG_DIM_HOVERCARD_TIP_OFFSET,
    margin-left         nil
  )),
  (north-east on-hovercard, (
    inherit (north on-hovercard),
    left                nil,
    right               $CONFIG_DIM_HOVERCARD_TIP_OFFSET,
    margin-left         nil
  )),
  (east on-hovercard, (
    width               nth-cyclic($CONFIG_DIM_HOVERCARD_TIP, 2),
    height              nth($CONFIG_DIM_HOVERCARD_TIP, 1),
    margin-top          -1/2*nth($CONFIG_DIM_HOVERCARD_TIP, 1),
    margin-left         nil,
    background-position _styleguideGetTooltipTipBG(east),
    top                 50%,
    left                100%
  )),
  (east-north on-hovercard, (
    inherit (east on-hovercard),
    top                 $CONFIG_DIM_HOVERCARD_TIP_OFFSET,
    margin-top          nil
  )),
  (east-south on-hovercard, (
    inherit (east on-hovercard),
    top                 nil,
    bottom              $CONFIG_DIM_HOVERCARD_TIP_OFFSET,
    margin-top          nil
  )),
  (west on-hovercard, (
    width               nth-cyclic($CONFIG_DIM_HOVERCARD_TIP, 2),
    height              nth($CONFIG_DIM_HOVERCARD_TIP, 1),
    margin-top          -1/2*nth($CONFIG_DIM_HOVERCARD_TIP, 1),
    margin-left         nil,
    background-position _styleguideGetTooltipTipBG(west),
    top                 50%,
    right               100%,
    left                nil
  )),
  (west-north on-hovercard, (
    inherit (west on-hovercard),
    top                 $CONFIG_DIM_HOVERCARD_TIP_OFFSET,
    margin-top          nil
  )),
  (west-south on-hovercard, (
    inherit (west on-hovercard),
    top                 nil,
    bottom              $CONFIG_DIM_HOVERCARD_TIP_OFFSET,
    margin-top          nil
  )),
  // on tooltips
  (on-tooltip, (
    position            absolute,
    margin-left         -1*$CONFIG_DIM_TOOLTIP_TIP,
    top                 100%,
    left                50%,
    border-width        _styleguideCaretSize(tooltip),
    border-top-color    nth($CONFIG_COLOR_BORDER_TOOLTIP, 1)
  )),
  (south-west on-tooltip, (
    left                $CONFIG_DIM_TOOLTIP_TIP_OFFSET,
    margin-left         nil
  )),
  (south-east on-tooltip, (
    left                nil,
    right               $CONFIG_DIM_TOOLTIP_TIP_OFFSET,
    margin-left         nil
  )),
  (north on-tooltip, (
    border-width        _styleguideCaretSize(tooltip, north),
    border-top-color    nil,
    border-top-style    nil,
    border-bottom-style solid,
    border-bottom-color nth($CONFIG_COLOR_BORDER_TOOLTIP, 1),
    top                 nil,
    bottom              100%
  )),
  (north-west on-tooltip, (
    inherit (north on-tooltip),
    left                $CONFIG_DIM_TOOLTIP_TIP_OFFSET,
    margin-left         nil
  )),
  (north-east on-tooltip, (
    inherit (north on-tooltip),
    right               $CONFIG_DIM_TOOLTIP_TIP_OFFSET,
    left                nil,
    margin-left         nil
  )),
  (east on-tooltip, (
    border-width        _styleguideCaretSize(tooltip, east),
    border-top-color    nil,
    border-top-style    nil,
    border-left-style   solid,
    border-left-color   nth($CONFIG_COLOR_BORDER_TOOLTIP, 1),
    margin-left         nil,
    margin-top          -1*$CONFIG_DIM_TOOLTIP_TIP,
    top                 50%,
    left                100%
  )),
  (east-north on-tooltip, (
    inherit (east on-tooltip),
    top                 $CONFIG_DIM_TOOLTIP_TIP_OFFSET,
    margin-top          nil
  )),
  (east-south on-tooltip, (
    inherit (east on-tooltip),
    top                 nil,
    bottom              $CONFIG_DIM_TOOLTIP_TIP_OFFSET,
    margin-top          nil
  )),
  (west on-tooltip, (
    border-width        _styleguideCaretSize(tooltip, west),
    border-top-color    nil,
    border-top-style    nil,
    border-right-style  solid,
    border-right-color  nth($CONFIG_COLOR_BORDER_TOOLTIP, 1),
    margin-left         nil,
    margin-top          -1*$CONFIG_DIM_TOOLTIP_TIP,
    top                 50%,
    right               100%,
    left                nil
  )),
  (west-north on-tooltip, (
    inherit (west on-tooltip),
    top                 $CONFIG_DIM_TOOLTIP_TIP_OFFSET,
    margin-top          nil
  )),
  (west-south on-tooltip, (
    inherit (west on-tooltip),
    top                 nil,
    bottom              $CONFIG_DIM_TOOLTIP_TIP_OFFSET,
    margin-top          nil
  ))
), $CONFIG_THEME);
}