Generated by SassMeister.com.

input.scss

.gc-card {
  --card-header-height: 50px;
  --card-footer-height: 36px;
  --card-no-data-message-height: 72px;
  --card-loader-animation-length: 1500ms;

  box-shadow: var(--shadow-A);
  background: var(--primary-B);
  border-radius: 6px;
  overflow: hidden;

  &:focus-within,
  &:hover {
    box-shadow: var(--shadow-B);
  }

  &.position-relative {
    position: relative;
  }

  @keyframes react-placeholder-pulse {
    0% {
      opacity: 0.6;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0.6;
    }
  }
}

output.css

.gc-card {
  --card-header-height: 50px;
  --card-footer-height: 36px;
  --card-no-data-message-height: 72px;
  --card-loader-animation-length: 1500ms;
  box-shadow: var(--shadow-A);
  background: var(--primary-B);
  border-radius: 6px;
  overflow: hidden;
}
.gc-card:focus-within, .gc-card:hover {
  box-shadow: var(--shadow-B);
}
.gc-card.position-relative {
  position: relative;
}
@keyframes react-placeholder-pulse {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}