/**
 * Generates the color black, with, optionally, a set opacity.
 *
 * @example
 *   .foo {
 *     border-color: black(0.1);
 *   }
 */

@function black($opacity) {
    @return rgba(0, 0, 0, $opacity);
}


/**
 * Generates the color white, with, optionally, a set opacity.
 *
 * @example
 *   .foo {
 *     border-color: white(0.1);
 *   }
 */

@function white($opacity) {
    @return rgba(255, 255, 255, $opacity);
}


/**
 * Shorthandizes position declarations.
 *
 * @example
 *   .foo {
 *     @include position(absolute, $top: 10px, $left: 10px);
 *   }
 *
 * @result
 *    .foo {
 *      position: absolute;
 *      left: 10px;
 *      top: 10px;
 *    }
 */

@mixin position($type, $top: null, $right: null, $bottom: null, $left: null) {
    position: $type;
    top: $top;
    right: $right;
    bottom: $bottom;
    left: $left;
}


/**
 * Sizing helper.
 *
 * @example
 *   .foo {
 *     @include size(350px);
 *   }
 *
 * @result
 *    .foo {
 *      width: 350px;
 *      height: 350px;
 *    }
 */

@mixin size($width, $height: $width) {
    width: $width;
    height: $height;
}


/**
 * When using ::before and ::after you'll always need these three
 *
 * @example
 *   .foo::before {
 *     @include pseudo;
 *   }
 *
 */

@mixin pseudo($display: block, $pos: absolute, $content: ''){
    content: $content;
    display: $display;
    position: $pos;
}


/**
 * This mixin takes all the hassle out of creating that triangle
 * you'll see coming out of most traditional tooltips, all without
 * images, you just specify it's colour, how big you want it, the
 * direction it's going to come out of your element and you're done!
 *
 */

@mixin css-triangle($color, $direction, $size: 6px, $position: absolute, $round: false){
    @include pseudo($pos: $position);
    width: 0;
    height: 0;
    @if $round {
        border-radius: 3px;
    }
    @if $direction == down {
        border-left: $size solid transparent;
        border-right: $size solid transparent;
        border-top: $size solid $color;
        margin-top: 0 - round( $size / 2.5 );
    } @else if $direction == up {
        border-left: $size solid transparent;
        border-right: $size solid transparent;
        border-bottom: $size solid $color;
        margin-bottom: 0 - round( $size / 2.5 );
    } @else if $direction == right {
        border-top: $size solid transparent;
        border-bottom: $size solid transparent;
        border-left: $size solid $color;
        margin-right: -$size;
    } @else if  $direction == left {
        border-top: $size solid transparent;
        border-bottom: $size solid transparent;
        border-right: $size solid $color;
        margin-left: -$size;
    }
}


@mixin align($vertical: true, $horizontal: false, $position: relative) {
    @if $position {
        position: $position;
    }
    @if $vertical {
        top: 50%;
    }
    @if $horizontal {
        left: 50%;
    }

    @if $vertical and $horizontal {
        transform: translateX(-50%) translateY(-50%);
    } @else if $vertical {
        transform: translateY(-50%);
    } @else {
        transform: translateX(-50%);
    }
}