calraijintaiko/caltaiko

@import 'variables';

@mixin box-style($bg-color: $sub-color-3, $shadow-color: $sub-color-2, $width: 5px, $offset: 0) {
  background-color: $bg-color;
  box-shadow: $width $width 0 $offset $shadow-color;
}

@mixin edit-icons($icon-size: 30px, $icon-padding: 0) {
  display: inline;
  float: right;
  img {
    display: inline-block;
    height: $icon-size;
    margin-right: $icon-padding;
    width: $icon-size;
  }
}

@mixin transition($effect: opacity, $time: .25s) {
  -webkit-transition: $effect $time ease-in-out;
  -moz-transition: $effect $time ease-in-out;
  -ms-transition: $effect $time ease-in-out;
  -o-transition: $effect $time ease-in-out;
  transition: $effect $time ease-in-out;
}

@mixin styled-button($color, $border-width: 0) {
  border: $border-width solid $color;
  color: $color;
  transition: all .3s ease;

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

// Clamps multi-line text with a fade-out box over the last line.
@mixin multi-line-clamp(
    $line-height: 1.2em, $font-size: 1.25em, $height: 5em) {
  font-size: $font-size;
  height: $height;
  line-height: $line-height;
  overflow: hidden;
  position: relative;

  &::after {
    background: linear-gradient(to right, $transparent, $white);
    bottom: 0;
    content: '';
    height: $line-height;
    position: absolute;
    right: 0;
    width: 40%;
  }
}