@mixin reset-appearance {
    resize: none;
    outline: none;
    -webkit-appearance: none;
        -ms-appearance: none;
}

@mixin button-shadow($color) {
    box-shadow: 0 4px 0 darken($color, 20%);
    &:active:not(:disabled){
      box-shadow: 0 2px 0 darken($color, 20%);
    }
}

// This function allows for ultra flexible easing curves
@mixin cubic-bezier($t1, $t2, $t3, $t4) {
    -webkit-animation-timing-function: cubic-bezier($t1, $t2, $t3, $t4);
       -moz-animation-timing-function: cubic-bezier($t1, $t2, $t3, $t4);
         -o-animation-timing-function: cubic-bezier($t1, $t2, $t3, $t4);
            animation-timing-function: cubic-bezier($t1, $t2, $t3, $t4);
}

%input-disabled{
  color: rgba(0, 0, 0, 0.3);
  background-color: $gray-very-light;
}

// Responsiveness

@mixin media-query-max($screen-width: $screen-size-phone) {
  @media screen and (max-width: $screen-width) {
    @content;
  }
}

@mixin media-query-min($screen-width: $screen-size-phone) {
  @media screen and (min-width: $screen-width) {
    @content;
  }
}

@mixin screen-not-phone() {
  @include media-query-min($screen-size-tablet) {
    @content;
  }
}

@mixin screen-tablet() {
  @include media-query-max($screen-size-tablet) {
    @content;
  }
}

@mixin screen-phone() {
  @include media-query-max($screen-size-phone) {
    @content;
  }
}

@mixin screen-phone-tiny() {
  @include media-query-max($screen-size-phone * 0.8) {
    @content;
  }
}