.ds-control-drag {
  align-items: center;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--ds-color-london-20);
  border: none;
  border-radius: 50%;
  box-shadow: none;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  height: 2rem;
  justify-content: center;
  padding: 0;
  transition: background-color var(--ds-interactions-transition);
  width: 2rem;
  will-change: background-color;
  svg {
    display: inline-flex;
  }
  .path-background {
    fill: var(--ds-color-london-100);
  }
  .path-background--disabled {
    fill: var(--ds-color-london-70);
  }
  &:hover {
    background-color: var(--ds-color-london-5);
  }
  &:focus {
    background-color: var(--ds-color-london-20);
    box-shadow: 0 0 0 0.125rem var(--ds-color-hong-kong-55);
    outline: solid transparent;
  }
  &:active {
    background-color: var(--ds-color-london-5);
    box-shadow: 0 0 0 0.125rem var(--ds-color-hong-kong-55);
  }
  &:disabled {
    background-color: var(--ds-color-london-95);
    box-shadow: none;
    cursor: not-allowed;
  }
}

.ds-control-drag--inverse {
  background-color: var(--ds-color-london-100);
  .path-background {
    fill: var(--ds-color-london-20);
  }
  .path-background--disabled {
    fill: var(--ds-color-london-70);
  }
  &:hover {
    background-color: var(--ds-color-london-85);
  }
  &:focus {
    background-color: var(--ds-color-london-100);
  }
  &:active {
    background-color: var(--ds-color-london-85);
  }
  &:disabled {
    background-color: var(--ds-color-london-35);
    cursor: not-allowed;
  }
}