.mds-c-scaffold-card {
  background-color: var(--mds-t-background-color--primary);
  box-shadow: 0 1px 0 0 var(--mds-t-border-color--secondary);
  margin: 0.25rem 0;
  position: relative;

  &.mds-is-clickable {
    cursor: pointer;
  }

  &.mds-is-draggable,
  &.mds-is-dragging {
    &::before {
      content: '';
      cursor: grab;
      display: none;
      height: 100%;
      left: calc(var(--mds-d-spacing--xl) * -1);
      position: absolute;
      top: 0;
      width: var(--mds-d-spacing--xl);

      .mds-c-slats:hover & {
        background-image: svg-load(
          '../../momentum-icons/dist/svg/dots-drag.svg',
          fill: $color-ui--5
        );
        background-position: center;
        background-size: var(--mds-d-font-size--med);
        display: block;
      }
    }
  }

  &.mds-is-dragging {
    box-shadow: 0 0 0 1px var(--mds-t-border-color--accent),
      var(--mds-d-elevation--4);
  }

  &.mds-is-draggable:focus-visible {
    box-shadow: 0 0 0 1px var(--mds-t-border-color--accent);
  }
}