.hover-action {
  display: block;
  position: relative;
  cursor: pointer;

  .hover-action-action {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    display: none;
    background-color: $white;
    align-items: center;
    padding-right: 1.5rem;

    .ico {
      @extend .pl-2;
    }

    label {
      @extend .p-0;
      position: relative;
      background-color: $white;
      cursor: pointer;
    }

    &:after {
      @include bg-gradient-to-transparent();
      height: 100%;
    }
  }

  &:hover {
    .hover-action-action {
      display: flex;
      height: 100%;
    }
  }
}


// Primary color
.hover-action.hover-action-primary {
  $bg: $blue-700;

  .hover-action-action {
    background-color: $bg;

    label, .ico {
      background-color: $bg;
      color: $blue-200;
    }

    .ico {
      color: $white;
    }

    &:after {
      background: linear-gradient(to left, $bg, (rgba($bg, 0)));
      display: block;
      content: "";
      position: absolute;
      top: 0;
      height: 100%;
      left: 50px * -1;
      width: 50px;
    }
  }
}
