/* ---------------------------------------------- Couleurs ajoutées via javascript

/* Sortable (jQuery UI) */

.sortable-area {
  border: 1px dashed currentColor;
  background-color: var(--main-menu-background);
}

div.ui-sortable-handle {
  border: 1px dashed currentColor !important;
  border-radius: .75em !important;

  & >.ui-sortable {
    // border-color: var(--main-menu-border) !important;
  }
}

/* color-picker.js */

.color-color-picker {
  border: 1px solid var(--color-picker-border);
  width: 195px;
  background: var(--color-picker-background);
}

/* _media_item.js */

.color-div {
  border: 1px solid var(--color-div-border);
}

/* Badges (common.js) */

.badgeable {
  /* class to set to badge parent's, not mandatory for menu items */
  position: relative;
}

/* Badge design */

.badge {
  color: var(--badge-color);
  background-color: var(--badge-std-background);
  border: 1px solid var(--badge-border);
  vertical-align: top;
  border-radius: 1em;
  padding: 0 .6em;
}

.badge-icon {
  background-color: var(--badge-soft-background);
}

/* Badge background override */

.badge-std {
  background-color: var(--badge-std-background);
}

.badge-info {
  background-color: var(--badge-info-background);
}

.badge-soft {
  background-color: var(--badge-soft-background);
}

/* Badge position */

.badge-block {
  /* Dashboard module → badge on top right */
  position: absolute;
  top: -10px;
  right: -10px;
}

.badge-icon {
  /* Dashboard icon → badge on top right */
  right: 1.8em;
}

.badge-inline {
  /* Menu item */
  margin-left: .5em;
}

.badge-left {
  right: auto;
  left: -10px;

  &.badge-icon {
    left: 20px;
  }
}

/* Badge design option */

.badge-noborder {
  border: none;
}

.badge-small {
  font-size: smaller;

  &.badge-icon {
    right: 25px;

    &.badge-left {
      right: auto;
      left: 25px;
    }
  }
}

.badge-square {
  border-radius: 0;
}
