.draggable-container {
  position: relative;

  @media (hover: hover) {
    &:hover#{&}--draggable:not(#{&}--drag-disabled),
    &:hover#{&}--dragging:not(#{&}--drag-disabled) {
      background-color: var(
        --wds-color-blue-500,
        var(--wsr-color-B50, #e7f0ff)
      );
    }
  }

  &:where(:focus-visible) {
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: none;
  }

  &#{&}--draggable:not(#{&}--dragging):not(#{&}--drag-disabled) {
    cursor: grab;
  }

  &#{&}--dragging:not(#{&}--drag-disabled) {
    cursor: grabbing;
  }

  &#{&}--dragging#{&}--dim:not(#{&}--drag-disabled) {
    opacity: 0.7;
  }

  @layer wds.composition {
    @media (hover: hover) {
      &:hover .drag-handle:not(.drag-handle--disabled) {
        color: var(
          --wds-color-fill-standard-primary,
          var(--wsr-color-B10, #116dff)
        );
      }
    }
  }
}