$expandable-block-closed-gradient-start: rgba(255, 255, 255, 1);
$expandable-block-closed-gradient-end: rgba(255, 255, 255, 0);

expandable-block.is-active {
  display: block;
  height: auto;
  overflow: hidden;
  padding-right: 2rem;
  position: relative;

  btn-ellipsis-expander {
    position: absolute;
    top: 0;
    right: 0;

    .btn-link-sm-ico {
      color: $link-color !important;
    }
  }
}

expandable-block[state="closed"]:after {
  position: absolute;
  bottom: 0;
  content: "";
  display: block;
  width: 100%;
  height: rem(30);
  background: linear-gradient(to top, $expandable-block-closed-gradient-start 0%, $expandable-block-closed-gradient-end 100%);
}

td:hover expandable-block[state="closed"]:after {
  background: linear-gradient(to top, $expandable-block-closed-gradient-start 0%, $expandable-block-closed-gradient-end 100%);
}
