@mixin hourglass($color) {
  display: inline-block;
  position: relative;
  @include color-svg('/images/hourglass_full.svg', transparent);
  background-size: 100%;

  &, .sand, &:before, &:after {
    width: 13px;
    height: 11px;
  }
  .sand, &:before, &:after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
  }
  .sand {
    background: $color;
  }
  &:after {
    @include color-svg('/images/hourglass_empty.svg', $color);
  }
}