@mixin material-card($shadow-size: 1px, $blur-size: 3px) {
  box-shadow: 0 $shadow-size $blur-size $shadow-light;
  border-radius: 2px;
}

@mixin message {
  color: $text-light;
  text-align: left;
  border-radius: 0;
  background: $light-grey;
  border-left: 10px solid $primary;
  margin: 5px 0 15px;
}

@mixin input-message($color) {
  color: $color;
  font-size: 12px;
  display: block;

  label {
    font-size: 10px !important;
    margin-left: 0;
    float: none !important;

    &:before {
      content: "* ";
    }

    &:after {
      content: "\A";
      white-space: pre;
    }
  }
}

@mixin flat-button {
  border: none;
  box-shadow: none;
  color: $accent;
  background: $light-grey;

  &:hover {
    background: $accent;
    color: $white;
  }
}

// camaieu
// low gap # = hard shades
@mixin shade-colors($shadecolor, $gap) {
  @for $i from 0 through $gap {
    $pc: calc(100 / $gap) * $i;
    $modColor: saturate(lighten($shadecolor, $pc * 1%), 15%);

    .shade-color-#{$i} {
      background-color: $modColor;
    }
  }
}

@mixin droppable {
  border-color: $medium-grey;
  border-width: 2px;
  border-style: dashed;
  background: $light-grey;

  &:hover {
    border-color: $primary;
  }

  &.droptarget {
    border-color: $accent;
  }
}

// @-webkit-keyframes ripple {
//     100% {
//         opacity: 0;
//         -webkit-transform: scale(2.5);
//     }
// }
// @-moz-keyframes ripple {
//     100% {
//         opacity: 0;
//         -moz-transform: scale(2.5);
//     }
// }
// @-o-keyframes ripple {
//     100% {
//         opacity: 0;
//         -o-transform: scale(2.5);
//     }
// }
// @keyframes ripple {
//     100% {
//         opacity: 0;
//         transform: scale(2.5);
//     }
// }

//buttons click
@-webkit-keyframes ripple {
  100% {
    opacity: 0;
    width: 200%;
    padding-bottom: 200%;
  }
}

@-moz-keyframes ripple {
  100% {
    opacity: 0;
    width: 200%;
    height: 200%;
  }
}

@keyframes ripple {
  100% {
    opacity: 0;
    width: 200%;
    padding-bottom: 200%;
  }
}

@mixin transform($value) {
  transform: $value;
  -webkit-transform: $value;
}