@import 'colours';
@import 'viewport';
@import 'browser';
@import 'aspect_ratio';

@mixin _button {
  display: block;
  background: $white;
  border: $greyBorder 1px solid;
  padding: 9px;
  line-height: 1em;
  text-align: center;
  &:hover {
    border-color: $greySelected;
  }
}

@mixin arrow($direction: top, $colour: #000, $fill-colour: #fff, $width: 15px, $line-width: 1px) {
    &:after,
    &:before {
        margin-left: $width * 0.5;
        left: 50%;
        bottom: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }
    &:after {
        border-bottom-color: $fill-colour;
        border-width: $width;
        margin-left: -$width;
    }
    &:before {
        border-bottom-color: $colour;
        border-width: $width + ($line-width * 2);
        margin-left: -($width + ($line-width * 2));
    }
}

@mixin feature($baseClass) {
    #{'body.app-f-' + $baseClass} {
        @content;
    }
}

@mixin keyframes($name) {
    @-webkit-keyframes #{$name} { @content; }
    @-moz-keyframes #{$name} { @content; }
    @-o-keyframes #{$name} { @content; }
    @keyframes #{$name} { @content; }
}

@mixin _transition($props...) {
    @include cross-browser(transition, $props);
}

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

@mixin _user-select($value) {
  $userSelectList: -webkit-touch-callout, -webkit-user-select, -khtml-user-select, -moz-user-select, -ms-user-select, user-select;
  @each $userSelect in $userSelectList {
    #{$userSelect}: $value;
  }
}

@mixin increased-tap-area($padding: 8px) {
  $tap-size-area: -1 * $padding;
  position: relative;
  &:after {
    content: '';
    position: absolute;
    top: $tap-size-area;
    bottom: $tap-size-area;
    left: $tap-size-area;
    right: $tap-size-area;
  }
}

@function to-list($args...) {
  @return append((), $args);
}