:root {
  --color-primary: #1e419c;
  --color-primary-light: #dbf0ff;
  --color-primary-lighter: #f1f7fe;
  --color-primary-pale: rgb(169, 182, 217);

  --color-secondary: #8e93a7;

  /* unset --color-hover:   */
  --color-hover-bg:  #0000000A; /* rgba(0, 0, 0, 0.04), #f1f7fe; */
  --color-active:    var(--color-primary);
  --color-active-bg: #dadada85;  /* rgba(30, 65, 156, 0.1), #dadada85 */

  --color-menu: #222;
  --color-menu-hover:     var(--color-hover);
  --color-menu-hover-bg:  var(--color-hover-bg);
  --color-menu-active:    var(--color-active);
  --color-menu-active-bg: var(--color-active-bg);

  --color-notification:    var(--color-primary);
  --color-notification-bg: var(--color-primary-light);

  --color-banner:    var(--color-primary);
  --color-banner-bg: var(--color-primary-light);

  --dragable-border: 1px dashed var(--color-primary);
  --color-dragable-hover:     var(--color-hover);
  --color-dragable-hover-bg:  var(--color-hover-bg);
  --color-dragable-active:    var(--color-active);
  --color-dragable-active-bg: var(--color-active-bg);
  /* unset --color-dragable-drag-over */
  --color-dragable-drag-over-bg: var(--color-primary-light);
  /* unset --color-dragable-placeholder */
  /* unset --color-dragable-placeholder-bg */

  --color-button-primary:    white;
  --color-button-primary-bg: var(--color-primary);
  /* unset --color-button-secondary-hover: ; */
  --color-button-primary-hover-bg: var(--color-primary-pale);

  --color-button-secondary:    var(--color-primary);
  --color-button-secondary-bg: var(--color-primary-light);
  /* unset --color-button-secondary-hover: ; */
  --color-button-secondary-hover-bg: var(--color-primary-pale);

  --color-tooltip:
  --color-tooltip-bg:
}

.drag .dragable {
  border: var(--dragable-border);
  border-radius: 6px;
}