@mixin input-cover() {
  @include position(0, null, null, 0);
  @include margin(0);

  position: absolute;

  width: 100%;
  height: 100%;

  border: 0;
  background: transparent;
  cursor: pointer;

  appearance: none;
  outline: none;
}

// Add position for all directions
// @param {string} $top
// @param {string} $right
// @param {string} $bottom
// @param {string} $left
// ----------------------------------------------------------
@mixin position($top: null, $right: null, $bottom: null, $left: null) {
  right: $right;
  left: $left;
  top: $top;
  bottom: $bottom;
}

// Add border radius for all directions
// @param {string} $top-start
// @param {string} $top-right
// @param {string} $bottom-right
// @param {string} $bottom-start
// ----------------------------------------------------------
@mixin border-radius($top-start, $top-right: $top-start, $bottom-right: $top-start, $bottom-start: $top-right) {
  @if $top-start == $top-right and $top-start == $bottom-right and $top-start == $bottom-start {
    border-radius: $top-start;
  } @else {
    border-top-left-radius: $top-start;
    border-top-right-radius: $top-right;
    border-bottom-right-radius: $bottom-right;
    border-bottom-left-radius: $bottom-start;
  }
}

// Font smoothing
// --------------------------------------------------

@mixin font-smoothing() {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

// Add property for all directions
// @param {string} $prop
// @param {string} $top
// @param {string} $right
// @param {string} $bottom
// @param {string} $left
// @param {boolean} $content include content or use default
// ----------------------------------------------------------
@mixin property($prop, $top, $right: $top, $bottom: $top, $left: $right) {
  @if $top == $right and $top == $bottom and $top == $left {
      #{$prop}: $top;
  } @else if $top == $bottom and $right == $left and $top != null and $right != null {
      #{$prop}: $top $right;
  } @else if $right == $left and $top != null and $right != null and $bottom != null {
      #{$prop}: $top $right $bottom;
  } @else if $top != null and $right != null and $bottom != null and $left != null {
      #{$prop}: $top $right $bottom $left;
  } @else {
      #{$prop}-top: $top;
      #{$prop}-bottom: $bottom;
  }
}

// Add padding for all directions
// @param {string} $top
// @param {string} $right
// @param {string} $bottom
// @param {string} $left
// ----------------------------------------------------------
@mixin padding($top, $right: $top, $bottom: $top, $left: $right) {
  @include property(padding, $top, $right, $bottom, $left);
}

// Add margin for all directions
// @param {string} $top
// @param {string} $right
// @param {string} $bottom
// @param {string} $left
// ----------------------------------------------------------
@mixin margin($top, $right: $top, $bottom: $top, $left: $right) {
  @include property(margin, $top, $right, $bottom, $left);
}


// Add border radius for all directions
// @param {string} $top-start
// @param {string} $top-right
// @param {string} $bottom-right
// @param {string} $bottom-start
// ----------------------------------------------------------
@mixin border-radius($top-start, $top-right: $top-start, $bottom-right: $top-start, $bottom-start: $top-right) {
  @if $top-start == $top-right and $top-start == $bottom-right and $top-start == $bottom-start {
    border-radius: $top-start;
  } @else {
    border-top-left-radius: $top-start;
    border-top-right-radius: $top-right;
    border-bottom-right-radius: $bottom-right;
    border-bottom-left-radius: $bottom-start;
  }
}