@import './../settings/_screen-sizes.scss';

/**
 * Media Queries
 * Mobile first
 */
@mixin mq($width, $type: min) {
    @if map_has_key($breakpoints, $width) {
        $width: map_get($breakpoints, $width);
    }

    @if $type == max {
        $width: $width - 1px;
    }

    @media only screen and (#{$type}-width: $width) {
        @content;
    }
}

/**
 * Font Weight
 */
@mixin font-weight($weight) {
    $output: $weight;

    @if map-has-key($weights, $weight) {
        $output: map-get($weights, $weight);
    }

    font-weight: $output;
}

/**
 * Common Helpers
 */
@mixin container {
    width        : 100%;
    max-width    : $container-width;
    margin-left  : auto;
    margin-right : auto;
    @include rem(padding-left, 16px);
    @include rem(padding-right, 16px);
}

@mixin show {
    opacity    : 1;
    visibility : visible;
}

@mixin hide {
    opacity    : 0;
    visibility : hidden;
    height     : 0;
    width      : 0;
}

@mixin force-show {
    display: block !important;
}

@mixin force-hide {
    display: none !important;
}

@mixin absolute-centered {
    position  : absolute;
    top       : 50%;
    left      : 50%;
    transform : translate(-50%, -50%);
}

@mixin fixed-centered {
    position  : fixed;
    top       : 50%;
    left      : 50%;
    transform : translate(-50%, -50%);
}

@mixin flex-centered {
    display         : flex;
    justify-content : center;
    align-items     : center;
}

@mixin flex-spaced {
    display         : flex;
    justify-content : space-between;
    align-items     : center;
}

@mixin hide-text {
    font-size   : 0;
    line-height : 0;
    color       : transparent;
}

@mixin reset-link {
    text-decoration : inherit;
    color           : inherit;

    &:hover {
        cursor: pointer;
    }
}

@mixin reset-media {
    max-width              : 100%;
    height                 : auto;
    -ms-interpolation-mode : bicubic;
    display                : inline-block;
    vertical-align         : middle;
}

@mixin reset-list {
    padding-left  : 0;
    margin-top    : 0;
    margin-bottom : 0;
    list-style    : none;
}

@mixin reset-table {
    border-collapse : collapse;
    border-spacing  : 0;
}

@mixin reset-table-cell {
    text-align     : left;
    font-weight    : normal;
    vertical-align : middle;
}

@mixin reset-button {
    overflow         : visible; // Shrinkwrap the text in IE7-
    margin           : 0;
    padding          : 0;
    border           : 0;
    background       : transparent;
    font             : inherit; // Inherit font settings (doesn’t work in IE7-)
    line-height      : normal; // Override line-height to avoid spacing issues
    cursor           : pointer; // Buttons don’t make the cursor change in all browsers
    -moz-user-select : text; // Make button text selectable in Gecko
}

@mixin reset-box-model {
    margin  : 0;
    padding : 0;
    border  : 0;
    outline : 0;
}

@mixin hidden-heading {
  font-size : 0;
  width     : 1px;
  height    : 1px;
  display   : inline-block;
  overflow  : hidden;
  position  : absolute !important;
  border    : 0 !important;
  padding   : 0 !important;
  margin    : 0 !important;
  clip      : rect(1px 1px 1px 1px); // for Internet Explorer
  clip      : rect(1px, 1px, 1px, 1px);
}

@mixin visually-hidden {
    position : absolute !important;
    overflow : hidden;
    clip     : rect(0 0 0 0);
    height   : 1px;
    width    : 1px;
    margin   : -1px;
    padding  : 0;
    border   : 0;
}

@mixin visually-shown($position: inherit) {
    position : $position !important;
    overflow : auto;
    clip     : auto;
    width    : auto;
    height   : auto;
    margin   : 0;
}

@mixin prevent-rendering {
    backface-visibility    : hidden;
    -webkit-font-smoothing : subpixel-antialiased;
}

@mixin placeholder($color, $opacity) {
    &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
        color: $color;
        opacity: $opacity;
    }

    &::-moz-placeholder { /* Firefox 19+ */
        color: $color;
        opacity: $opacity;
    }

    &:-ms-input-placeholder { /* IE 10+ */
        color: $color;
        opacity: $opacity;
    }

    &:-moz-placeholder { /* Firefox 18- */
        color: $color;
        opacity: $opacity;
    }
}

/**
 * Generate arrow on a pseudo-element
 * To set color, use 'border-color' inside a class
 *
 * @param  {string} $position:     top              Arrow position (top, right, bottom, left)
 * @param  {string} $arrow-width:  20px             Arrow Width
 * @param  {string} $arrow-size:   $arrow-width/4   Arrow size
 *
 * @return A CSS Arrow
 */
@mixin arrow-generate($position: top, $arrow-width: 20px, $arrow-size: $arrow-width / 4) {
    $pos: -45deg;

    @if $position == top {
        $pos: $pos;
    } @elseif $position == right {
        $pos: 45deg;
    } @elseif $position == down {
        $pos: 135deg;
    } @elseif $position == left {
        $pos: -135deg;
    } @else {
        //
    }

    content: '';
    display: inline-block;
    width: $arrow-width;
    height: $arrow-width;
    border-top: $arrow-size solid #333;
    border-right: $arrow-size solid #333;
    transform: rotate($pos);
}