// Thanks to http://codepen.io/msaetre/pen/mAtJF for inspiration
@mixin trash-can-icon($color, $hover-color, $background, $size) {
  width: $size;
  height: $size;
  position: relative;
  overflow: hidden;

  .trash-lid,
  .trash-container {
    position: absolute;
    background-color: $color;
  }

  &:hover,
  &:active,
  &.active {
    cursor: pointer;

    .hover-colorize {
      background-color: $hover-color;
    }
  }

  .trash-lid {
    width: 62%;
    height: 10%;
    left: 50%;
    top: 10.5%;
    margin-left: -31%;
    border-top-left-radius: 80%;
    border-top-right-radius: 80%;
    transform: rotate(-5deg);

    &::after {
      content: "";
      position: absolute;
      width: 26%;
      height: 100%;
      left: 50%;
      margin-left: -13%;
      margin-top: -10%;
      background-color: inherit;
      border-top-left-radius: 30%;
      border-top-right-radius: 30%;
      transform: rotate(-1deg);
    }
  }

  .trash-container {
    width: 56%;
    height: 65%;
    left: 50%;
    margin-left: -28%;
    bottom: 10%;
    border-bottom-left-radius: 15%;
    border-bottom-right-radius: 15%;

    &::after {
      content: "";
      width: 110%;
      height: 12%;
      position: absolute;
      left: 50%;
      margin-left: -55%;
      top: 0;
      background-color: inherit;
      border-bottom-left-radius: 45%;
      border-bottom-right-radius: 45%;
    }
  }

  span {
    width: 4%;
    height: 50%;
    position: absolute;
    margin-left: -2%;
    bottom: 17%;
    background-color: $background;

    &:nth-of-type(1) {
      left: 38%;
    }

    &:nth-of-type(2) {
      left: 50%;
    }

    &:nth-of-type(3) {
      left: 62%;
    }
  }
}
