.x-no-card {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

.x-card {
  background: $body-bg;
  box-shadow: $box-shadow;
}

.x-analysis-card {
  height: 18rem;
  .x-state-dot {
    margin-top: -.5rem;
  }
}

.x-anim-card {
  overflow: hidden;
  transition: $x-hover-transition !important;
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 25px 0 rgba($black, 0.25) !important;
  }
}

.dark-layout {
  .x-card {
    background: $theme-dark-body-bg;
    box-shadow: $theme-dark-box-shadow;
  }

  .x-anim-card {
    &:hover {
      box-shadow: 0 3px 6px -4px rgb(0 0 0 / 48%), 0 6px 16px 0 rgb(0 0 0 / 62%), 0 9px 28px 8px rgb(0 0 0 / 20%) !important;
    }
  }
}