// Foundation for Apps
//
// Mixins
// ------
// The framework comes with a number of mixins that help you easily create common small components,
// like triangles and menu icons.

/// CSS Triangle
/// Creates a CSS triangle, which can be used for dropdown arrows, popup tails, and more. Use this mixin inside a `&::before` or `&::after` selector, to attach the triangle to an existing element.
///
/// @param {number} $triangle-size - Width of the triangle.
/// @param {color} $triangle-color - Color of the triangle.
/// @param {keyword} $triangle-direction - Direction the triangle points. Can be `top`, `right`, `bottom`, or `left`.
@mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: inset $triangle-size;
    @if ($triangle-direction == top) {
        border-color: $triangle-color transparent transparent transparent;
        border-top-style: solid;
    }
    @if ($triangle-direction == bottom) {
        border-color: transparent transparent $triangle-color transparent;
        border-bottom-style: solid;
    }
    @if ($triangle-direction == left) {
        border-color: transparent transparent transparent $triangle-color;
        border-left-style: solid;
    }
    @if ($triangle-direction == right) {
        border-color: transparent $triangle-color transparent transparent;
        border-right-style: solid;
    }
}

// @mixins
//
/// Hamburger
/// Creates a three-line menu icon, affectionately referred to as the "hamburger icon".
///
/// @param {number} $width - Width of the icon, in rem units.
/// @param {number|boolean} $left - Left offset of the icon. Set to `false` to center the icon horizontally.
/// @param {number|boolean} $top - Top offset of the icon. Set to `false` to center the icon vertically.
/// @param {number} $thickness - Height of each line in the icon.
/// @param {number} $gap - Amount of space between each line.
/// @param {color} $color - Color of the lines.
/// @param {color} $hover-color - Color of the lines on hover.
@mixin hamburger(
    $width,
    $left,
    $top,
    $thickness,
    $gap,
    $color,
    $hover-color,
    $offcanvas
) {
    span::after {
        content: "";
        position: absolute;
        display: block;
        height: 0;

        @if $offcanvas {
            @if $top {
                top: $top;
            } @else {
                top: 50%;
                margin-top: -$width/2;
            }
            @if $left {
                left: $left;
            } @else {
                left: ($tabbar-menu-icon-width - $width)/2;
            }
        } @else {
            top: 50%;
            margin-top: -$width/2;
            #{$opposite-direction}: $topbar-link-padding;
        }

        box-shadow: 0 0px 0 $thickness $color,
            0 $gap + $thickness 0 $thickness $color,
            0 (2 * $gap + 2 * $thickness) 0 $thickness $color;
        width: $width;
    }
    span:hover:after {
        box-shadow: 0 0px 0 $thickness $hover-color,
            0 $gap + $thickness 0 $thickness $hover-color,
            0 (2 * $gap + 2 * $thickness) 0 $thickness $hover-color;
    }
}

/// Clearfix
/// Uses the micro clearfix hack popularized by Nicolas Gallagher. Include this mixin on a container if its children are all floated, to give the container a proper height.
///
/// @see http://nicolasgallagher.com/micro-clearfix-hack/
@mixin clearfix {
    &:before,
    &:after {
        content: " ";
        display: table;
    }
    &:after {
        clear: both;
    }
}

/// Invisible Element
/// Makes an element visually hidden, but accessible.
///
/// @see http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
@mixin element-invisible {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}

/// Invisible Element Off
/// Reverses the CSS output by the `element-invisible()` mixin.
@mixin element-invisible-off {
    position: static !important;
    height: auto;
    width: auto;
    overflow: visible;
    clip: auto;
}

$text-input-selectors: 'input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea';
