@mixin hover-gradient-background {
  background: linear-gradient(to bottom, $light_gray 60%, $yellow 100%);
  background-position: bottom 0px left 0px;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: background 0.3s ease-out, padding 0.2s ease-out;

  &:hover {
    background-position: bottom -10px left 0px;
  }
}

@mixin yellow-gradient {
  background: linear-gradient(to bottom, transparent 50%, $yellow 100%);
}

@mixin yellow-gradient-after($height: 30px) {
  content: '';
  display: block;
  position: absolute;
  height: $height;
  width: 100%;
  bottom: 0;
  left: 0;
  @include yellow-gradient;
  z-index: 2;
  pointer-events: none;
}

@mixin category-gradient($color) {
  background: linear-gradient(to bottom, $light_gray 60%, $color);
}