$x-card-border-hover-color: var(--custom-theme-primary-lighter-hover, $border-active);
$box-highlight-border-shadow: 0 0 0 1px $x-card-border-hover-color;

.x-notification {
  position: relative;
  @include transition(transform 0.18s ease-in-out);
  transform: scale(1);

  .close {
    @include media-breakpoint-up(xl) {
      visibility: hidden;
    }
  }

  &:hover,
  &:active {
    transform: scale(1.01);
    // Use box-shadow instead of border to prevent expanding element's dimension
    @include box-shadow($box-highlight-shadow, $box-highlight-border-shadow);

    .close {
      visibility: visible;
    }
  }
}